jQuery中如何停止当然执行的自定义的动画
墨初 前端设计 5927阅读
上一篇我们介绍了一下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:如果本篇文章有错误,可以在下面的评论中提出哦!