jquery stop()方法的讲解使用

来源：互联网发布：网络派出所电话编辑：程序博客网时间：2024/06/10 15:33

jQuery中stop()函数用于停止当前匹配元素上正在运行的动画。默认情况下，stop()函数只会停止当前正在运行的动画。如果你使用animate()函数为当前元素设置了A、B、C这3段动画，如果当前正在执行的动画是A，则只会停止动画A的执行，不会阻止动画B和C的执行。当然，你也可以通过指定可选的选项参数来停止所有的动画。

jQuery中stop()函数用于停止当前匹配元素上正在运行的动画。

停止动画并不是恢复到该动画执行前的状况，而是直接停止，当前动画执行到什么状态，就停留在什么状态。
一、jquery stop()语法
$(selector).stop(stopAll,goToEnd)
参数说明
1、stopAll
可选。代表是否要清空未执行完的动画队列。
意思就是如果该参数值为true，则会停止所有后续动画或事件。如果该参数值为false，则只停止被选元素当前执行的动画，后续动画不受影响。因此，该参数一般都为false。
如果使用stop()方法，则会立即停止当前正在运行的动画，如果接下来还有动画等待执行，则以当前状态开始接下来的动画。
2、goToEnd
可选。代表是否直接将正在执行的动画跳转到当前动画的末尾。
规定是否允许完成当前动画，该参数只能在设置了stopAll参数时使用
3、备注
默认情况下，不写参数，则会被认为两个参数都是false。
例如：执行一个元素高度从100px到200px的过渡动画，当高度为150px时停止了该动画，则当前高度仍然保持150px的现状。如果该动画设置了执行完毕后的回调函数，则不会执行该回调函数。
二、jquery stop()实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <!-- $('>div')这样写表示的是 ：获取 body 标签下所有第一级子元素中的 div 元素 ，如果没有 ">"，则表示的是获取页面中所有的 div 元素 -->  <script src="jquery-1.8.3.js"></script> <script type="text/javascript">$(function(){    $("button:eq(0)").click(function(){        $("#panel").animate({height:"150" }, 1000).animate({width:"300" },            1000).hide(2000).animate({height:"show", width:"show", opacity:"show" }, 1000).animate({height:"500"},            1000);    });    //stop([clearQueue][,gotoEnd]);　　//语法结构    $("button:eq(1)").click(function(){        $("#panel").stop();//停止当前动画，继续下一个动画    });    $("button:eq(2)").click(function(){        $("#panel").stop(true);//清除元素的所有动画    });    $("button:eq(3)").click(function(){        $("#panel").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画    });    $("button:eq(4)").click(function(){        $("#panel").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态    });})</script></head><body><button>开始一连串动画</button><button>stop()</button><button>stop(true)</button><button>stop(false,true)</button><button>stop(true,true)</button><div id="panel">    <h5 class="head">什么是jQuery?</h5>    <div class="content">        jQuery。    </div><div class="content">        jQuery2。    </div><div class="content">        jQuery3。    </div><div class="content">        jQuery4。    </div><div class="content">        jQuery5。    </div><div class="content">        jQuery6。    </div><div class="content">        jQuery7。    </div><div class="content">        jQuery8。    </div><div class="content">        jQuery9。    </div><div class="content">        jQuery10。    </div><div class="content">        jQuery11。    </div><div class="content">        jQuery12。    </div></div></body></html>实例说明
1、点击按钮（stop()），由于两个参数都是false。所以点击发生时，animater没有跳到当前动画（动画1）的最终效果，而直接进入动画2，然后动画3，4，5.直至完成整个动画。
2、点击按钮（stop(true)），由于第一个是true，第二个是false，所以animater立刻全部停止了，动画不动了。
3、点击按钮（stop(false,true)），由于第一个是false，第二个是true，所以点击发生时，animater身处的当前动画（动画1）停止并且animater直接跳到当前动画（动画1）的最终末尾效果位置，接着正常执行下面的动画（动画2，3，4，5），直至完成整个动画。
3、点击按钮（stop(true，true)），由于两个都是true，所以点击发生时，animater跳到当前动画（动画1）的最终末尾效果位置，然后，全部动画停止。
三、jquery stop()在工作中的应用
一个下拉菜单，当鼠标移上去的时候就菜单显示，当鼠标离开的时候菜单隐藏 ，如果我快速不断地将鼠标移入移出菜单（即，当菜单下拉动画未完成时，鼠标又移出了菜单）就会产生“动画积累"，当鼠标停止移动后，积累的动画还会持续执行，直到动画序列执行完毕。
解决方法
在写动画效果的代码前加入stop(true，true)，这样每次快速的移入移出菜单，就正常了，当移入一个菜单的时候，停止所有加入队列的动画，完成当前的动画（跳至当前动画的最终效果位置）。
转载地址：http://www.studyofnet.com/news/1031.html

0 0