总结
version 1.7版本前
.stop([clearQueue][,jumpToEnd])
clearQueue: 布尔值,默认是 false;此值处理是相关的动画队列是否移除,如果为 false 时,则停止当前的动画,后面的动画按队列进行。如果为 true,则全部移除动画
jumpToEnd:布尔值,默认是 false,此值处理的是相关动画是立即完成还是按队列顺序完成,如果为 false,则按队列顺序完成,如果为 true,即立即完成完成队列的动画
version 1.7 之后
.stop([queue,][clearQueue][,jumpToEnd])
queue:是要停止的当前动画名称,其余两参数与上面的一样
例子:
.stop(): 停止当前的动画(即第一个动画队列),其余的按队列顺序执行
.stop(false, true):停止当前的动画(即第一个动画队列),其余的动画立即完成
.stop(true, true):停止当前的动画(即第一个动画队列),并移除其余的动画队列
.stop(false, false)与.stop() 一样
.stop(true, false):停止当前的动画,并移除其余的动画队列
-----------------------------
jQuery的stop([clearQueue], [jumpToEnd])方法应用
停止匹配元素上正在运行的动画。
1.2 新增stop([clearQueue], [jumpToEnd])
clearQueue (Boolean) 可选参数,布尔值,表示是否同时删除队列中的动画。默认值 false。
jumpToEnd (Boolean) 可选参数,布尔值,表示是否应该立即完成当前动画。默认值 false。
1.7 新增stop([queue], [clearQueue], [jumpToEnd])
queue (String) 可选参数,队列中动画的名字,只有该动画会被停止。
clearQueue (Boolean) 可选参数,布尔值,表示是否同时删除队列中的动画。默认值 false。
jumpToEnd (Boolean) 可选参数,布尔值,表示是否应该立即完成当前动画。默认值 false。
当在元素上调用 .stop() 时,该元素上正在执行的动画(如果有的话)会立刻停止。如果正在对某一元素使用 .slideUp() 动画进行元素隐藏,那么在动画执行过程中(即元素尚未被完全隐藏时),调用 .stop() 时,该元素依然会有一部分是处于显示状态的。由于元素上的动画尚未执行完成,所以动画完成时执行的回调函数是不会被调用的。
如果在同一元素上调用了多个动画,那么尚未被执行的动画会被放到队列中。直到前面的动画执行完,否则队列中的剩余动画是不会以被执行的。当调用了 .stop(),队列中的下一个动画会立刻被执行。如果提供了 clearQueue 参数且参数值是 true,那么队列中其它的动画会被移除,并且永远不会被执行。
如果提供了 jumpToEnd 参数且参数值是 true,那么当前正在执行的动画会立刻变成动画结束状态,即该元素上的 CSS 属性会被立刻修改成动画的目标值。拿上面提到的 .slideUp() 例子来说,这意味着元素会被立刻隐藏,如果提供了回调函数的话,那么该回调函数也会被立刻调用。
从 jQuery 1.7 开始,如果提供了 queue 参数,那么只有该参数所表示的队列中的动画才会被停止。
适用 .stop() 方法的地方是显而易见的。比如说,若要在一个元素的 mouseenter 和 mouseleave 时执行动画,首先应该立刻停止该元素上正在进行的动画。例如:
<div id="hoverme">
Hover me
<img id="hoverme" src="book.png" alt="" width="100" height="123" />
</div>
我们可以采用链式方法,在 .stop(true, true) 后添加一个漂亮的淡入淡出效果,而不会产生由于队列中含有多个动画而带来的常见问题:
$('#hoverme-stop-2').hover(function() {
$(this).find('img').stop(true, true).fadeOut();
}, function() {
$(this).find('img').stop(true, true).fadeIn();
});
切换动画(Toggling Animations)
从 jQuery 1.7 开始, 如果使用 .stop() 过早的停止了可切换的动画(toggled animation),会触发 jQuery 内部的动画跟踪。在早先的版本中,如果在切换动画完成之前,调用了 .stop() 方法,会导致动画状态的丢失(如果 jumpToEnd 参数是 false 的话)。此时,任何后续动画将从状态 "half-way" 开始执行,有时这会导致元素消失。要想观察这种行为,请参阅下面最后一个例子。
通过将全局属性 $.fx.off 设置成 true,就可以停止所有动画,此时所有的动画元素会被设置成动画的最终状态,而不是显示一个动画。
示例:
点击 Go 按钮,立刻开始执行动画。然后点击 STOP 按钮,动画元素会在它所在的位置停下来。另外一种测试方法时,多次点击不同的动画按钮,此时尚未被执行的动画会被添加到动画队列中,而后再点击 STOP 按钮,则会立刻停止当前的动画,继续执行队列中的其它动画。
<!DOCTYPE html>
<html>
<head>
<style>div {
position: absolute;
background-color: #abc;
left: 0px;
top:30px;
60px;
height: 60px;
margin: 5px;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<button id="go">Go</button>
<button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block"></div>
<script>
/* Start animation */
$("#go").click(function(){
$(".block").animate({left: '+=100px'}, 2000);
});
/* Stop animation when button is clicked */
$("#stop").click(function(){
$(".block").stop();
});
/* Start animation in the opposite direction */
$("#back").click(function(){
$(".block").animate({left: '-=100px'}, 2000);
});
</script>
</body>
</html>
示例:
点击 slideToggle 按钮,会开始动画。然后在动画结束前再次点击该按钮,此时,会立刻从当前位置向反方向开始动画。
<!DOCTYPE html>
<html>
<head>
<style>.block {
background-color: #abc;
border: 2px solid black;
200px;
height: 80px;
margin: 10px;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<button id="toggle">slideToggle</button>
<div class="block"></div>
<script>
var $block = $('.block');
/* Toggle a sliding animation animation */
$('#toggle').on('click', function() {
$block.stop().slideToggle(1000);
});
</script>
</body>
</html>
====
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery test</title>
<style>
#animater{150px; border:1px solid #000; position:relative;}
</style>
<script src="./jquery-1.10.2.js" type="text/javascript"></script>
</head>
<body>
<h1>
<h2>动画测试效果序列</h2>
1.先向右移动到距离 800px<br />
2.字体在2s增大为 36px;<br />
3.字体在2S变大为 12px;<br />
4.字体在2s变大为 56px;<br />
5.透明度在 2S 变为 0;<br />
6.透明度在 2S 变为 1;<br />
7.在2S内,向左移动到 200px,字体大小为 16px<br />
</h1>
<div id="animater">
stop()方法测试
</div>
<div id="button">
<input type="button" id="button1" value="stop();" />
<input type="button" id="button2" value="stop(true);" />
<input type="button" id="button3" value="stop(false, true);" />
<input type="button" id="button4" value="stop(true, true);" />
<input type="button" id="button5" value="stop(false, false);" />
</div>
<script type="text/javascript">
/*
jQuery 之 .stop(); 方法
jquery 版本是 1.10.2
作用:停止当前正在运行的动画
语法 $(selector).stop([stopAll][, goToEnd]) version 1.2
$(selector).stop([queue][,clearQueue][,jumpToEnd])
.stop(); 参数为空,即默认都为 false,点击$('#button1')则动画1停止,如果再点击 $('#button1'),则动画2也停止,再点击 $('#button1'),则画面3也停止……,如果只点击一次,则只有动画1停止,其余按正常启动。
.stop(true); 则全部动画停止
.stop(false, true); 动画1立即完成,其余按正常启动
.stop(true, true); 动画1立即完成,其余动画停止工作
.stop(false, false) 与 .stop() 效果一样
*/
/*
$('#animater').animate({'right': -800}, 3000)
.animate({'font-size': '36px'}, 2000)
.animate({'font-size': '12px'}, 2000)
.animate({'font-size': '56px'}, 2000)
.animate({'opacity': 0}, 2000)
.animate({'opacity': 1}, 2000)
.animate({'left': 200, 'font-size': '16px'}, 2000);
*/
$(document).ready(function(){
$('#button1').click(function(){
$('#animater').stop();
});
$('#button2').click(function(){
$('#animater').stop(true);
});
$('#button3').click(function(){
$('#animater').stop(false, true);
});
$('#button4').click(function(){
$('#animater').stop(true, true);
});
$('#button5').click(function(){
$('#animater').stop(false, false);
});
});
</script>
</body>
</html>
================
官网的说法(自个翻译):
当 .stop() 被应用于一个元素时,正在运行的动画(如果有的话)会立即停止,例如,有一个元素正在发生 .slideUp() 隐藏时,此时当 .stop() 被触发,则这个元素还是没有被隐藏,但是高度比之前要小,后面回调的则不起作用。
示例如下:
$('#animater').animate({'right': -800}, 3000, function(){
alert("hi, lin3615");
});
$('#button1').click(function(){
$('#animater').stop();
});
则,后面的回调函数不起作用
---------------------------
如多于一个动画被用于一个元素时,这些动画会按照排列顺序依次先后被执行,当 .stop() 被调用时,后面的一个动画会立即被执行,如果在 clearQueue 参数为 true,则剩下的动画会被移除,不会执行。
--------------------
如果 jumpToEnd 参数为 true,则当前的快速被执行,但是元素会立即执行完成
---------------------------
===============