3.1显示隐藏效果
1.显示语法规范
2.显示参数
（1）参数都可以省略，无动画直接显示
（2）speed：三种预订速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）。
（3）easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
1 <button>显示</button>
2 <button>隐藏</button>
3 <button>切换</button>
4 <div></div>
5 <script>
6 $(function () {
7 $("button").eq(1).click(function () {
8 $("div").hide("fast", function () {
9
10 });
11 //也可以写slow或者直接写数字来控制速度
12 })
13 $("button").eq(0).click(function () {
14 $("div").show("fast", function () {
15
16 });
17 //也可以写slow或者直接写数字来控制速度
18 })
19 $("button").eq(2).click(function () {
20 $("div").toggle("fast", function () {
21
22 });
23 //一般情况写我们都不加参数直接显示隐藏
24 })
25 })
26 </script>
3.2下拉样式
1 <button>下拉滑动</button>
2 <button>上拉滑动</button>
3 <button>切换滑动</button>
4 <div></div>
5 <script>
6 $(function () {
7 $("button").eq(0).click(function () {
8 $("div").slideDown("fast", function () {
9
10 });
11 //也可以写slow或者直接写数字来控制速度
12 })
13 $("button").eq(1).click(function () {
14 $("div").slideUp("fast", function () {
15
16 });
17 //也可以写slow或者直接写数字来控制速度
18 })
19
20 $("button").eq(2).click(function () {
21 $("div").slideToggle("fast", function () {
22
23 });
24 //一般情况写我们都不加参数直接显示隐藏
25 })
26 })
27 </script>
3.3事件切换
1 <script>
2 //第一个function是鼠标经过的函数，第二个函数是鼠标离开的函数
3 $(".nav>li").hover(function () {
4 $(this).children("ul").slideDown(200);
5 }, function () {
6 $(this).children("ul").slideUp(200);
7 });
8 </script>
事件切换hover如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
改进：将经过和离开两个函数用slideToggle代替
$(".nav>li").hover(function () {
$(this).children("ul").slideToggle(200);
});
3.4动画队列及其停止排队方法
1.动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
2.停止排队
把上一个动画效果停止，只执行下一个（当前鼠标）动画效果
在slideToggle前加stop即可实现
$(this).children("ul").stop().slideToggle(200);
stop写在slideToggle后面则动画效果消失！写在前面结束的是上一次动画
3.5淡入淡出效果
1.淡入效果语法规范
2.淡入效果参数
（1）参数都可以省略
（2）speed：三种预订速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）。
1 <button>淡入效果</button>
2 <button>淡出效果</button>
3 <button>淡入淡出切换</button>
4 <button>修改透明度</button>
5 <div></div>
6 <div></div>
7 <script>
8 $("button").eq(0).click(function () {
9 //淡入
10 $("div").fadeIn(1000);
11 })
12 $("button").eq(1).click(function () {
13 //淡出
14 $("div").fadeOut(1000);
15 })
16 $("button").eq(2).click(function () {
17 //淡入淡出切换
18 $("div").fadeToggle(1000);
19 })
20 </script>
1.渐进方式调整到指定的不透明度
2.效果参数
（1）opacity透明度必须写，取值0~1之间。
（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）。必须写
（3）easing：（Optional）用来指定切换效果，默认是“swing0”，可用参数“linear”。
$("button").eq(3).click(function () {
//透明度
$("div").fadeTo(1000, 0.5);
})
高亮显示案例：利用fadeTo
1 <div class="wrap">
2 <ul>
3 <li><a href="#"><img src="" alt=""></a></li>
4 <li><a href="#"><img src="" alt=""></a></li>
5 <li><a href="#"><img src="" alt=""></a></li>
6 <li><a href="#"><img src="" alt=""></a></li>
7 <li><a href="#"><img src="" alt=""></a></li>
8 <li><a href="#"><img src="" alt=""></a></li>
9
10 </ul>
11 </div>
12 <script>
13 $(function () {
14 //鼠标进入的时候，其他的li标签透明度0.5
15 $(".wrap li").hover(function () {
16 $(this).siblings().fadeTo(400, 0.5);
17 }, function () {
18 $(this).siblings().fadeTo(400, 1);
19
20 })
21 })
22 </script>
3.6自定义动画animate
1.语法
2.参数
（1）params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <script src="jquery.min.js"></script>
9 <style>
10 div {
11 position: absolute;
12 width: 200px;
13 height: 200px;
14 background-color: pink;
15 }
16 </style>
17 </head>
18
19 <body>
20 <button>动起来</button>
21 <div></div>
22 <script>
23 $(function () {
24 $("button").click(function () {
25 $("div").animate({
26 left: 200,//原来需要有定位
27 top: 300,
28 opacity: 4,//不透明度
29 width: 400
30 }, 500);
31 })
32 })
33 </script>
34
35 </body>
36
37 </html>
案例：王者荣耀手风琴（网上都有，这里就不粘贴代码了）