jQuery中停止动画stop
动画在执行过程中是允许被暂停的,当一个元素调用.stop()方法,当前正在运行的动画(如果有的话)立即停止
语法:
.stop( [clearQueue ], [ jumpToEnd ] ).stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )
stop还有几个可选的参数,简单来说可以这3种情况
- .stop(); 停止当前动画,点击在暂停处继续开始
- .stop(true); 如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
- .stop(true,true); 当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值
简单的说:参考下面代码、
$("#aaron").animate({ ???height: 300}, 5000)$("#aaron").animate({ ???width: 300}, 5000)$("#aaron").animate({ ???opacity: 0.6}, 2000)
- stop():只会停止第一个动画,第二个第三个继续
- stop(true):停止第一个、第二个和第三个动画
- stop(true ture):停止动画,直接跳到第一个动画的最终状态
<!DOCTYPE html><html><head> ???<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> ???<title></title> ???<style> ???p { ???????color: red; ???} ???????div { ???????width: 200px; ???????height: 100px; ???????background-color: yellow; ???????color: red; ???} ???a{ ???????display: block ???} ???</style> ???<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body> ???<h2>stop</h2> ???<p>慕课网,专注分享</p> ???<div id="aaron">内部动画</div> ???<input id="exec" type="button" value="执行动画"><br /><br /> ???点击观察动画效果: ???<select id="animation"> ???????<option value="1">stop()</option> ???????<option value="2">stop(true)</option> ???????<option value="3">stop(true,true)</option> ???</select> ???<a></a> ???<input id="stop" type="button" value="停止动画"> ???<script type="text/javascript"> ???//点击执行动画 ???$("#exec").click(function(){ ???????$("#aaron").animate({ ???????????height: 300 ???????}, 5000) ???????$("#aaron").animate({ ???????????width: 300 ???????}, 5000) ???????$("#aaron").animate({ ???????????opacity: 0.6 ???????}, 2000) ???}) ???$("#stop").click(function() { ???????var v = $("#animation").val(); ???????var $aaron = $("#aaron"); ???????if (v == "1") { ???????????//当前当前动画 ???????????$aaron.stop() ???????} else if (v == "2") { ???????????//停止所以队列 ???????????$aaron.stop(true) ???????} else if (v == "3") { ???????????//停止动画,直接跳到当前动画的结束 ???????????$aaron.stop(true,true) ???????} ????}); ???</script></body></html>
jQuery中停止动画stop
原文地址:http://www.cnblogs.com/zhangmingzhao/p/7499981.html