jquery stop()方法有什么用

第jquerystop()方法有什么用一般来说，在实际开发中我们只会用到stop()方法的第1个参数，很少用到第2个参数。

举例：

!DOCTYPEhtml

html

head

metacharset=utf-8/

title/title

styletype=text/CSS

width:50px;

height:50px;

background-color:lightskyblue;

/style

scriptsrc=js/jquery-1.12.4.min.js/script

scriptsrc=js/jquery.color.js/script

script

$(function(){

$(#btn-start).click(function(){

$(div).animate({width:200px},2000)

.animate({background-color:red},2000)

.animate({height:200px},2000)

.animate({background-color:blue},2000);

$(#btn-stop).click(function(){

$(div).stop();

/script

/head

body

inputid=btn-starttype=buttonvalue=开始/

inputid=btn-stoptype=buttonvalue=停止/br/

div/div

/body

/html

预览效果下图所示。

在这个例子中，我们使用animate()方法定义了4个动画。我们点击【开始】按钮后，过了一会儿如果再点击【停止】按钮，就会立即停止当前执行的动画（也就是停止当前的animate()方法），然后跳到下一个动画（也就是下一个animate()方法）。

如果再次点击【停止】按钮，它又会跳到下一个动画，以此类推。小伙伴们可以自行测试来感受一下。

如果想要停止所有的队列动画，可以通过定义stop()方法的第一个参数为true来实现，代码如下：

$(#btn-stop).click(function(){

$(div).stop(true);

})

举例：

!DOCTYPEhtml

html

head

metacharset=utf-8/

title/title

styletype=text/css

width:50px;

height:50px;

background-color:lightskyblue;

/style

scriptsrc=js/jquery-1.12.4.min.js/script

script

$(function(){

$(div).hover(function(){

$(this).animate({height:150px},500);

},function(){

$(this).animate({height:50px},500);//移出时返回原状态

/script

/head

body

div/div

/body

/html

预览效果下图所示。

在这个例子中，我们使用hover()方法定义鼠标指针移入和鼠标指针移出时的动画效果。当我们快速地移入或移出元素时，会发现一个很奇怪的bug：元素会不断地变长或变短！也就是说，动画会不断执行，根本停不下来。

这种根本停不下来的bug在实际开发中经常会碰到，小伙伴们一定要特别注意。实际上，这个bug是由动画累积所导致的。在jQuery中，如果一个动画没有执行完，它就会被添加到动画队列中去。在这个例子中，每一次移入或移出元素，都会产生一个动画，如果该动画没有被执行完，它就会被添加到动画队列中去，然后没有被执行完的动画会继续执行，直到所有动画执行完毕。

针对这个bug，我们只需要在移入或移出元素产生的动画执行之前加入stop()方法，就能轻松解决。最终修改后的代码如下。

$(div).hover(function(){

$(this).stop().animate({height:150px},500);

},function(){

$(this).stop().animate({height:50px},500);//移出时返回原状态

})

对于这种由于动画累积产生的bug，我们还可以通过is(:animated)来判断当前的动画状态并解决。对于is(:animated)这种方式，之后会详细介绍。

实际上，jQuery还有一个方法可以中断动画finish()。这个方法