1. 基本动画 1）缩放 显示语法： jQuery对象.show(speed,easing,fn); 隐藏语法： jQuery对象.hide(speed,easing,fn); 切换语法： jQuery对象.toggle(speed,easing,fn); 三个属性都是可选的。 speed 表示动画时长（
1. 基本动画
1）缩放
显示语法：jQuery对象.show(speed,easing,fn);
隐藏语法：jQuery对象.hide(speed,easing,fn);
切换语法：jQuery对象.toggle(speed,easing,fn);
三个属性都是可选的。
speed 表示动画时长（速度），单位毫秒
easing 表示运动方式，默认 swing 缓冲；linear 匀速。
1 <style> 2 div { 3 width: 500px; 4 height: 500px; 5 background: pink; 6 } 7 </style> 8 <body> 9 <button class="btn1">显示</button> 10 <button class="btn2">隐藏</button> 11 <button class="btn3">切换</button> 12 <div></div> 13 <script src="lib/jquery-1.12.4.js"></script> 14 <script> 15 //显示 16 $(‘.btn1‘).click(function() { 17 // $(‘div‘).show();//直接显示。实际上是控制display的值 18 $(‘div‘).show(1000); 19 }); 20 //隐藏 21 $(‘.btn2‘).click(function() { 22 $(‘div‘).hide(1000); 23 }); 24 //切换 25 $(‘.btn3‘).click(function() { 26 $(‘div‘).toggle(1000); 27 }); 28 </script> 29 </body>
第三个参数 fn ：是函数
1 <body> 2 <button class="btn1">显示</button> 3 <div></div> 4 <script src="lib/jquery-1.12.4.js"></script> 5 <script> 6 $(‘.btn1‘).click(function() { 7 $(‘div‘).show(1000, function() { 8 //动画完毕后要执行的程序 9 $(‘div‘).css(‘background‘,‘red‘); 10 //不能写在.show的外面。因为show中有定时器，定时器代码会最后执行。 11 }); 12 }); 13 </script> 14 </body>
2）上卷下拉
显示语法：jQuery对象.slideDown(speed,easing,fn);
隐藏语法：jQuery对象.slideUp(speed,easing,fn);
切换语法：jQuery对象.slideToggle(speed,easing,fn);
1 <body> 2 <button class="btn1">显示</button> 3 <button class="btn2">隐藏</button> 4 <button class="btn3">切换</button> 5 <div></div> 6 <script src="lib/jquery-1.12.4.js"></script> 7 <script> 8 //显示 9 $(‘.btn1‘).click(function() { 10 $(‘div‘).slideDown(1000); 11 }); 12 //隐藏 13 $(‘.btn2‘).click(function() { 14 $(‘div‘).slideUp(1000); 15 }); 16 //切换 17 $(‘.btn3‘).click(function() { 18 $(‘div‘).slideToggle(1000); 19 }); 20 </script> 21 </body>
3）淡入淡出
显示语法：jQuery对象.fadeIn(speed,easing,fn);
隐藏语法：jQuery对象.fadeOut(speed,easing,fn);
切换语法：jQuery对象.fadeToggle(speed,easing,fn);
1 <body> 2 <button class="btn1">显示</button> 3 <button class="btn2">隐藏</button> 4 <button class="btn3">切换</button> 5 <div></div> 6 <script src="lib/jquery-1.12.4.js"></script> 7 <script> 8 //显示 9 $(‘.btn1‘).click(function() { 10 $(‘div‘).fadeIn(1000); 11 }); 12 //隐藏 13 $(‘.btn2‘).click(function() { 14 $(‘div‘).fadeOut(1000); 15 }); 16 //切换 17 $(‘.btn3‘).click(function() { 18 $(‘div‘).fadeToggle(1000); 19 }); 20 </script> 21 </body>
2. 自定义动画
语法：animate(params,[speed],[easing],[fn]);
speed、easing、fn属性可选。
param 需要传入一个对象。不可选，必须要写。
1 <style> 2 div { 3 width: 200px; 4 height: 200px; 5 background: pink; 6 position: absolute; 7 left: 0; 8 } 9 </style> 10 <body> 11 <button>运动</button> 12 <div></div> 13 <script src="lib/jquery-1.12.4.js"></script> 14 <script> 15 $(‘button‘).click(function() { 16 $(‘div‘).animate({ 17 //在jQuery中只有样式为数值的才可以动画。比如background不可以设置动画 18 left: 1000, 19 width: 500, 20 height: 500 21 },2000,linear); 22 }); 23 </script> 24 </body>
3. 停止动画
语法：jQuery对象.stop(clearQueue,jumpToEnd);
- clearQueue：
true表示清空该物体所有动画（清空队列）。
false表示仅仅清除当前正在运动这一个动画。默认是false
- jumpToEnd：
true表示停止动画，并且直接完成运动目标。
false表示停止动画，保持当前停止的状态。不会运动到目标。默认是false
开发中常用的stop方法，一般不传入实参，使用默认值。在animate前面加stop()方法。
1 $(‘div‘).stop().animate({ left: 1000, width: 500, height: 500 },2000,linear);