jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果,在它们完成之前。
语法:$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
1、$("div").stop(); //停止当前活动的动画,但允许已排队的动画向前执行。(即:停止当前动画,跳入下一个动画) 2、$("div").stop(true); //按钮停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止。 3、$("div").stop(true,true); //会立即完成当前活动的动画,然后停下来。(即:停止所有动画,跳到当前动画终点) 4、$("div").stop(true,false); //停止所有动画,保持当前状态
实例:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({left:'100px'},5000);
$("div").animate({fontSize:'3em'},5000);
});
$("#stop").click(function(){
$("div").stop(); //停止当前活动的动画,但允许已排队的动画向前执行。
});
$("#stop2").click(function(){
$("div").stop(true); //按钮停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止。
});
$("#stop3").click(function(){
$("div").stop(true,true); //会立即完成当前活动的动画,然后停下来。
});
});
</script>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p><b>"开始"</b> 按钮会启动动画。</p>
<p><b>"停止"</b> 按钮会停止当前活动的动画,但允许已排队的动画向前执行。</p>
<p><b>"停止所有"</b> 按钮停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止。</p>
<p><b>"停止但要完成"</b> 会立即完成当前活动的动画,然后停下来。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
实例二、
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>动画效果</title> <%--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--%> <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#begin").click(function () { for (var i = 0; i < 5; i++) { $("div").animate({ left: '250px', opacity: '0.5',//透明度 height: '150px', width: '150px' }, 'slow'); $("#sec").show('slow'); $("div").animate({ left: '0px', opacity: '1', height: '100px', width: '100px' }, 'slow'); $("#sec").hide('slow'); } }); //停止当前动画,跳入下一个动画 $("#stop").click(function () { $("div").stop(); }) //停止所有动画,保持当前状态 $("#stop1").click(function () { $("div").stop(true,false); }) //停止所有动画,跳到当前动画终点 $("#stop2").click(function () { $("div").stop(true, true); }) /* $(selector).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 因此,默认地,stop() 会清除在被选元素上指定的当前动画。 下面的例子演示 stop() 方法,不带参数: 实例 */ }); </script> </head> <body> <button id="begin">开始动画</button> <button id="stop">停止当前动画,进入下一个动画</button> <button id="stop1">瞬间停止</button><button id="stop2">停止所有动画,跳到当前动画终点</button> 默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。 <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> <p id="sec" style="display:none;">第二次才显示 </div> </body> </html>