jQuery中如何停止当然执行的自定义的动画

上一篇我们介绍了一下jQ中自定义动画animate()的使用方法，虽然说介绍的不够详细，但是基本上按照这个思路是可以使实大部份效果的，今天说一下如何停止当前的动画效果，给他们做个停止的按钮

jQuery中的stop()方法解释

stop()：方法可以停止当前正在运行的动画效果

语法

$(selector).stop(stopAll,goToEnd)

注：

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

goToEnd：可选，规定是否允许完成当前动画

举例说明一下，两个参数

设置三个按钮来控制animate()动画

HTML代码

<button id='button'>开始</button>
<button id='button2'>停止当前</button>
<button id='button3'>停止所有</button>
<button id='button4'>完成当前并停止</button>
<!--飞鸟慕鱼博客-->
<div style="width:400px;height:300px;background-color:green;">

JQ代码

$("#button").click(function () {
    $("div").animate({width:"800px",height:"20px"},3000)
    .delay(2000)//两个动画之间的延迟
    .animate({ width: "600px", height: "400px" }, 3000);
});
$("#button2").click(function(){
    $("div").stop();
});
$("#button3").click(function () {
    $("div").stop(true);
});
$("#button4").click(function () {
    $("div").stop(true,true);
});

我们通过对stop()各个参数的不同调用，可以实现不同的功能，停止动画，停止当前动画继续下一个，快速完成当前动画，并停止以后的动画。

PS：如果本篇文章有错误，可以在下面的评论中提出哦！