大佬教程收集整理的这篇文章主要介绍了jQuery动画，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
显示语法：jQuery对象.show(speed,easing,fn);
隐藏语法：jQuery对象.hide(speed,fn);
切换语法：jQuery对象.toggle(speed,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>
@H_502_534@2）上卷下拉
显示语法：jQuery对象.slideDown(speed,fn);
隐藏语法：jQuery对象.slideUp(speed,fn);
切换语法：jQuery对象.slideToggle(speed,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>
显示语法：jQuery对象.fadeIn(speed,fn);
隐藏语法：jQuery对象.fadeOut(speed,fn);
切换语法：jQuery对象.fadeToggle(speed,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>
语法：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>
语法：jQuery对象.stop(clearQueue,jumpToEnd);
true表示清空该物体所有动画（清空队列）。
false表示仅仅清除当前正在运动这一个动画。默认是false
true表示停止动画，并且直接完成运动目标。
以上是大佬教程为你收集整理的jQuery动画全部内容，希望文章能够帮你解决jQuery动画所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。