jquery animate stop函数解析

jquery animate stop函数解析

今天我们来看看jquery中动画操作的stop函数。其实我至今不是很明白啊，所以此文算是求救以及抛砖引玉。

在jquery 1.7版本以前，stop支持两个参数，分别是clearQueue和jumpToEnd。这点可以参考官方文档：stop

今天我写个示例，该例参考了w3school的在线测试代码：jquery stop 参数示例

本人代码示例：demo1，demo2

stop(clearQueue,jumpToEnd)函数分析

仅仅从官方API上给出的说明，我们就知道，第一个参数是针对的其它动画队列（不包含当前动画），第二个参数则是当前动画。

那么，什么是动画队列呢？

所谓的动画队列就是一系列要执行的动画，比如对一个盒子先在前一秒执行挪动动画，再过一秒执行变大的动画。那么，这就是两个动画了。

再比如，点击某个按钮a，给盒子b触发动画效果，每次挪动10px，挪动10px需要的时间是2s，那么以很快的速度狂点这个a按钮，你在2s时间里点了10次，这个动画需要累积10次的。虽然我们2s里只能完成1个动画效果，但是剩下的9个动画还是要完成的，这就形成了动画累积，跟排队似的，若不做任何处理，将会逐个按照先来先动画的规则完成。

但现实中，这种动画累积并非是我们期望的结果。所以，我们需要对动画进行更多的操作。从stop的参数来看，对于动画的操作，分为当前动画和等候动画队列，传入的参数为boolean值类型。

• clearQueue，是否清除等候动画队列，默认false，即是不清除等候动画队列，设置为false，则清空等候动画队列。
• jumpToEnd，是否立即完成当前动画，默认false，即是停止当前动画，设置为true，则立即完成当前动画。

没错，上面的例子确实可以验证stop函数的参数作用。

但是，尼玛啊，我又写了个例子，我感脚我的认知又被颠覆了。。。

在线demo，请猛戳 jquery stop 示例3

html：

<ahref="#"class="btn">hover me</a><divclass="dropdown"><ul><li>lalalal1</li><li>lalalal3</li><li>lalalal2</li></ul></div>

javascript:

<scripttype="text/javascript"src="../js/common/jquery.js"></script><scripttype="text/javascript">
$(function(){var i=0,j=0;function getHourTime(datetime){var time={
            hours:datetime.getHours(),
            seconds:datetime.getSeconds(),
            miliseconds:datetime.getMilliseconds()}return time.hours+':'+time.seconds+':'+time.miliseconds;}
    $('.btn').hover(function(){
        $('.dropdown').stop(false,false).slideDown(4000,function(){
            i++;
            console.log('mouseEnter:'+i+', time is:'+getHourTime(newDate()));});},function(){
        $('.dropdown').stop(false,false).slideUp(4000,function(){
            j++;
            console.log('mouseout....'+j+', time is:'+getHourTime(newDate()));});});});</script>

记住，测试时，光标迅速进入和离开。然后，光标再次进入时，就没反应了。。

另外，既然第一个设置是针对等候动画队列的，为何我设置为false时，那些积累的动画队列就不执行了呢？

还是执行了，但是很短暂？

求大神告知我真相。

 

 

 

标签: jquery, javascript