jquery之stop()的用法

工作中遇到过的实际案例：

1、我在项目里做的一个下拉菜单，当鼠标移上去的时候就菜单显示，当鼠标离开的时候菜单隐藏

如果我快速不断地将鼠标移入移出菜单（即，当菜单下拉动画未完成时，鼠标又移出了菜单）就会产生“动画积累"，当鼠标停止移动后，积累的动画还会持续执行，直到动画序列执行完毕。

2、项目里ng-click 点击事件，然后让一个div弹窗淡入淡出，（即，当连续多次点击按钮触发事件，就会产生点击事件多次点击后）就会产生“动画积累"，当多次点击按钮完成后，积累的动画还会持续执行，直到动画序列执行完毕。

解决方法：在写动画效果的代码前加入stop(true，true

)，这样每次快速的移入移出菜单，就正常了，当移入一个菜单的时候，停止所有加入队列的动画，但是完成当前的动画（跳至当前动画的最终效果位置）

 $scope.sendMsg = function($event){$event.stopPropagation();$('.add').stop(true,true).fadeIn(500);$('.add').stop(true,true).delay(2000).fadeOut(1000);}

目的：为了了解stop()的用法，举个例子，直观的方式看看。

实物：一个id="animater"的div包含了一段文字。(以下用animator表示实物)

动画最终的完整效果： animater向右移动800px（这个完整的过程是动画1），然后，字体逐渐变大（这个完整的过程是动画2），然后，透明度逐渐降低到0（这个完整的过程是动画3），然后透明度逐渐恢复到1（这个完整的过程是动画4），然后字体大小变为16px同时移动到距离左边界200px的位置（这个完整的过程是动画5）.

操作：点击不同id的button，观看效果。

HTML代码：

       <div id="animater">stop()方法测试</div>

        <div id="button"><input type="button" id="button1" value="stop()"/> <input type="button" id="button2" value="stop(true)"/> <input type="button" id="button3" value="stop(false,true)"/> <input type="button" id="button4" value="stop(true,true)"/> </div>

CSS代码：

         #animater{width: 150px;background:activeborder; border: 1px solid black; /*为了移动，需设置此属性*/ position: relative; }

jquery代码：

              //            为了看效果，随意写的动画$('#animater').animate({ 'right':-800 }, 3000).animate({'font-size':'16px'},'normal').animate({'font-size':'26px'},'normal').animate({'font-size':'36px'},'normal').animate({'font-size':'46px'},'normal').animate({'font-size':'56px'},'normal').animate({'opacity':0},'normal').animate({'opacity':1},'normal').animate({'left':200,'font-size':'16px'},'normal'); // 点击不同的button执行不同的操作  $('#button1').click(function(){ //默认参数是false，不管写一个false还是两个false还是没写false效果一样 $('#animater').stop(); }); $('#button2').click(function(){ //第二个参数默认false $('#animater').stop(true); }); $('#button3').click(function(){ $('#animater').stop(false,true); }); $('#button4').click(function(){ $('#animater').stop(true,true); });

W3School上是这样的说明的：

stop(stopAll,goToEnd)

参数	描述
stopAll	可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd	可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。

参数

描述

stopAll

可选。规定是否停止被选元素的所有加入队列的动画。

goToEnd

可选。规定是否允许完成当前的动画。

该参数只能在设置了 stopAll 参数时使用。

我的理解：

stopAll 为false时，不停止被选元素所有加入队列的动画,仅停止当前的动画。stopAll为true时，停止所有加入队列的动画（如goToend为true，直接跳到当前动画的最终效果）。

goToend为false时，不允许直接跳到当前动画的最终效果(应该就是所谓的完成当前的动画吧)，goToend为true时，允许直接跳到完成当前动画的最终末尾效果

每次运行页面,animater运动时，点击不同button,看到如下不同的效果（animater处在动画1时点击）：

点击按钮button1（stop()），由于两个参数都是false。所以点击发生时，animater没有跳到当前动画（动画1）的最终效果，而直接进入动画2，然后动画3，4，5.直至完成整个动画。