首页 > 代码库 > 深入学习jQuery动画控制
深入学习jQuery动画控制
目录
[1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制前面的话
jQuery动画可以使用fade、hide、slide等方法实现基本动画效果，可以使用animate实现自定义动画，甚至可以使用queue实现动画队列。但是，却缺少了对动画控制的介绍。动画产生后，描述动画状态、进行动画延迟、操作动画暂停等都是很重要的功能。本文将详细介绍jQuery动画控制
动画状态
当用户快速在某个元素多次执行动画时，会造成动画累积的现象。这时，就需要引入动画状态这个概念。判断元素是否处于动画状态中，如果处于，则不添加新动画
is(‘:animated‘)
使用is(‘:animated‘)方法来判断元素是否处于动画状态
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">按钮一</button><button id="btn2">按钮二</button><button id="reset">恢复</button><div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div><script>$(‘#reset‘).click(function(){ history.go();})$(‘#btn1‘).click(function(event){ $(‘#box‘).animate({‘left‘:‘+=100px‘});});$(‘#btn2‘).click(function(event){ if(!$(‘#box‘).is(‘:animated‘)){ $(‘#box‘).animate({‘left‘:‘+=100px‘}); }});</script>
<iframe style="width: 100%; height: 140px;" src="http://sandbox.runjs.cn/show/jtsfuxvx" frameborder="0" width="320" height="240"></iframe>
停止动画
【stop()】
stop()方法用于停止匹配元素当前正在运行的动画
stop([queue][,clearQueue][,jumpToEnd])
stop()方法可以接受3个可选参数，第一个参数queue表示停止动画队列的名称；第二个参数clearQueue表示是否清空队列中的动画，默认值为false；第三个参数jumpToEnd表示是否当前动画立即完成，默认值为false
【1】当stop()方法不接受任何参数时，将立刻停止当前动画
对于hover动画效果来说，经常出现用户把光标移入元素时出发触发动画效果，但当前动画没有结束时，用户已经将光标移出元素。这样移入移出过快会导致动画效果延迟
此时，只要在光标移入、移出动画之前加入stop()方法就可以结束当前动画，并立即执行队列中下一个动画
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="reset">恢复</button><div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue">未设置stop的hover动画效果</div><div id="box1" style="position:relative;height: 100px;width: 300px;background-color: lightgreen">设置stop的hover动画效果</div><script>$(‘#reset‘).click(function(){ history.go();})$(‘#box‘).hover(function(event){ $(this).animate({‘width‘:‘400px‘})},function(){ $(this).animate({‘width‘:‘300px‘})});$(‘#box1‘).hover(function(event){ $(this).stop().animate({‘width‘:‘400px‘})},function(){ $(this).stop().animate({‘width‘:‘300px‘})});</script>
<iframe style="width: 100%; height: 240px;" src="http://sandbox.runjs.cn/show/dayztppf" frameborder="0" width="320" height="240"></iframe>
【2】stop()参数clearQueue表示是否清空队列中的动画，默认值为false
当设置该参数为true时，则不仅停止当前动画，而且会清空队列中动画
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn">开始动画</button><button id="btn1">停止当前动画</button><button id="btn2">停止当前及后续动画</button><button id="reset">恢复</button><div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div><script>$(‘#reset‘).click(function(){ history.go();})$(‘#btn‘).click(function(event){ $(‘#box‘).animate({‘left‘:‘100px‘},1000).animate({‘width‘:‘200px‘},1000); $(‘#box‘).animate({‘left‘:‘0‘},1000).animate({‘width‘:‘100px‘},1000);});$(‘#btn1‘).click(function(event){ $(‘#box‘).stop();})$(‘#btn2‘).click(function(event){ $(‘#box‘).stop(true);})</script>
<iframe style="width: 100%; height: 140px;" src="http://sandbox.runjs.cn/show/mtypiyr1" frameborder="0" width="320" height="240"></iframe>
【3】stop()参数jumpToEnd表示是否当前动画立即完成，默认值为false
当该参数设置为true时，当前动画立即完成
stop()相当于stop(false,false)表示停止执行当前动画，后续动画接着进行
stop(true,false)表示停止执行当前动画，后续动画不再进行
stop(false,true)表示当前动画立即完成，后续动画接着进行
stop(true,true)表示当前动画立即完成，后续动画不再进行
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><input id="btn" type="button" value="开始动画"><button>stop()</button><button>stop(true,false)</button><button>stop(false,true)</button><button>stop(true,true)</button><input id="reset" type="button" value="恢复"><div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div><script>$(‘#reset‘).click(function(){ history.go();})$(‘#btn‘).click(function(event){ $(‘#box‘).animate({‘left‘:‘100px‘},1000).animate({‘width‘:‘200px‘},1000); $(‘#box‘).animate({‘left‘:‘0‘},1000).animate({‘width‘:‘100px‘},1000);});$(‘button‘).click(function(event){ jQuery.globalEval("$(‘#box‘)." + $(this).html());})</script>
<iframe style="width: 100%; height: 140px;" src="http://sandbox.runjs.cn/show/nosdzoog" frameborder="0" width="320" height="240"></iframe>
【finish()】
finish()方法是另一种停止动画的方法，它可以停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画
finish([queue])
finish()方法可以接受一个可选参数queue表示停止动画队列的名称
finish()方法和stop(true,true)很相似，stop(true,true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，finish()会导致所有排队的动画的CSS属性跳转到他们的最终值
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><input id="btn" type="button" value="开始动画"><button>finish()</button><button>stop(true,true)</button><input id="reset" type="button" value="恢复"><div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div><script>$(‘#reset‘).click(function(){ history.go();})$(‘#btn‘).click(function(event){ $(‘#box‘).animate({‘left‘:‘100px‘},1000).animate({‘width‘:‘200px‘},1000); $(‘#box‘).animate({‘left‘:‘0‘},1000).animate({‘width‘:‘100px‘},1000);});$(‘button‘).click(function(event){ jQuery.globalEval("$(‘#box‘)." + $(this).html());})</script>
<iframe style="width: 100%; height: 140px;" src="http://sandbox.runjs.cn/show/vbeco5ac" frameborder="0" width="320" height="240"></iframe>
动画延迟
delay()方法可以用来设置一个延时来推迟执行队列中后续的项
delay(duration[,queueName])
duration是delay()方法的必须参数，用于设定下个队列推迟执行的时间，持续时间是以毫秒为单位的，默认值为‘normal‘，代码400毫秒的延时；‘fast‘和‘slow‘分别代表200和600毫秒的延时
queueName是delay()方法的可选参数，它是一个队列名的字符串，默认是动画队列fx
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">开始动画</button><button id="reset">恢复</button><div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div><script>$(‘#reset‘).click(function(){ history.go();})$(‘#btn1‘).click(function(event){ $(‘#box‘).animate({‘left‘:‘300px‘}).delay(500).animate({‘width‘:‘100px‘});});</script>
<iframe style="width: 100%; height: 140px;" src="http://sandbox.runjs.cn/show/x7qy9npx" frameborder="0" width="320" height="240"></iframe>
全局控制
【jQuery.fx.off】
jQuery.fx.off属性可以用来对jQuery动画进行全局控制，默认为undefined，当这个属性设置为true的时候，调用时所有动画方法将立即设置元素为他们的最终状态，而不是显示效果
当然，动画可以通过设置这个属性为false重新打开
[注意]由于该属性是全局性的，因此在没有动画正在运行或停止所有动画时，此属性的变化才能生效
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">开始动画</button><button id="btn2">开闭动画</button><button id="reset">恢复</button><div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div><script>$(‘#reset‘).click(function(){ history.go();})$(‘#btn1‘).click(function(event){ $(‘#box‘).animate({‘left‘:‘300px‘},1000).animate({‘width‘:‘100px‘},1000);});$(‘#btn2‘).click(function(){ $.fx.off = !$.fx.off;});</script>
<iframe style="width: 100%; height: 140px;" src="http://sandbox.runjs.cn/show/cze7dkm3" frameborder="0" width="320" height="240"></iframe>
【jQuery.fx.interval】
jQuery.fx.interval属性可以改变动画的频率，以毫秒为单位
这个属性可以设置动画每秒运行帧数，默认是13毫秒。该属性值越小，在速度较快的浏览器中，动画执行的越流畅，但是会影响程序的性能并且占用更多的CPU资源
[注意]由于该属性是全局性的，因此在没有动画正在运行或停止所有动画时，此属性的变化才能生效
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">开始动画</button><button id="btn2">改变动画频率</button><button id="reset">恢复</button><div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div><script>$(‘#reset‘).click(function(){ history.go();})$(‘#btn1‘).click(function(event){ $(‘#box‘).animate({‘left‘:‘300px‘},1000).animate({‘width‘:‘100px‘},1000);});$(‘#btn2‘).click(function(){ $.fx.interval = 100;});</script>
<iframe style="width: 100%; height: 140px;" src="http://sandbox.runjs.cn/show/xfsftqlq" frameborder="0" width="320" height="240"></iframe>
<script type="text/javascript">// 0){ return; } if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){ if(select[i+1].getBoundingClientRect().top > 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }}document.body.onmousewheel = wheel;document.body.addEventListener(‘DOMMouseScroll‘,wheel,false);var oCon = document.getElementById("content");var close = oCon.getElementsByTagName(‘span‘)[0];close.onclick = function(){ if(this.innerHTML == ‘显示目录‘){ this.innerHTML = ‘ב; this.style.background = ‘‘; oCon.style.border = ‘2px solid #ccc‘; oCon.style.width = ‘‘; oCon.style.height = ‘‘; oCon.style.overflow = ‘‘; oCon.style.lineHeight = ‘30px‘; }else{ this.innerHTML = ‘显示目录‘; this.style.background = ‘#3399ff‘; oCon.style.border = ‘none‘; oCon.style.width = ‘60px‘; oCon.style.height = ‘30px‘; oCon.style.overflow = ‘hidden‘; oCon.style.lineHeight = ‘‘; }}for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].onmouseover = function(){ this.style.color = ‘#3399ff‘; } oCon.children[i].onmouseout = function(){ this.style.color = ‘inherit‘; if(this.mark){ this.style.color = ‘#3399ff‘; } } oCon.children[i].onclick = function(){ change(this); } }function change(_this){ for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].mark = false; oCon.children[i].style.color = ‘inherit‘; oCon.children[i].style.textDecoration = ‘none‘; oCon.children[i].style.borderColor = ‘transparent‘; } _this.mark = true; _this.style.color = ‘#3399ff‘; _this.style.textDecoration = ‘underline‘; _this.style.borderColor = ‘#2175bc‘; }// ]]></script><script type="text/javascript" src="http://files.cnblogs.com/files/xiaohuochai/contextMenu.js"></script>深入学习jQuery动画控制