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

jQuery中的stop()方法解释

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

语法

$(selector).stop(stopAll,goToEnd)

注:

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

goToEnd:可选,规定是否允许完成当前动画

举例说明一下,两个参数

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

HTML代码

JQ.stop()方法可以停止正在执行的动画

<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:如果本篇文章有错误,可以在下面的评论中提出哦!