jQuery 效果

1. jQuery常见效果

常见效果：隐藏、显示、切换，滑动，淡入淡出，以及动画。
2.隐藏/显示
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。

代码展示：

   $(".title").mouseover(function(){
       $(".submenu").show();
       //或者
       //$(".submenu").toggle();
   })

   $("#main").mouseleave(function(){
       $(".submenu").hide();
       //或者
       //$(".submenu").toggle();
   })

   $(".item").click(function(){
       console.log($(this).text());
   })

})

执行效果：

3.淡入/淡出
jQuery fadeIn() 用于淡入已隐藏的元素。
jQuery fadeOut() 方法用于淡出可见元素。

代码展示：

$(function(){
    $(".title").mouseover(function(){
        $(".submenu").fadeIn("slow");
    })

    $("#main").mouseleave(function(){
        $(".submenu").fadeOut(1000);
    })
    $(".item").click(function(){
        console.log($(this).text());
    })
})

运行效果：

1. 动画

jQuery animate() 方法用于创建自定义动画。

语法：
$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
代码展示：

$(function () {
    $("#btn").click(function(){
        $("#girl").animate({
                height: '+=75px',
                width: '+=100px',
                opacity: '+=0.8'
            },
            4000
        )
    })
})

执行效果：

本章总结：
学完本章内容应熟练掌握以下内容：
jQuery常用效果：

常见效果：隐藏、显示、切换，滑动，淡入淡出，以及动画。