.stop()
.stop( [clearQueue ] [, jumpToEnd ] )
描述：在匹配的元素上停止当前正在运行的动画。
如果在一个元素上调用.stop()方法，当前正在运行的动画（如果有的话）会立即停止。举个例子，如果一个元素用.slideUp()隐藏的时候，调用了.stop()方法，元素依然被显示着，但是会是它当前高度的一个分数。不会调用回调函数了。
如果在同一个元素是调用了多个动画方法，后面的动画会放置到元素的效果队列上。这些动画不会开始，除非第一个动画结束。如果调用了.stop()方法，队列中下一个动画针立即开始。如果向clearQueue提供了true值，则在队列中，动画的剩余部分都会被删除，不再运行。
如果向jumpToEnd参数提供了true值，则当前动画停止了，但是元素立即给出它的每个CSS属性的目标值。在上面的.slideUp()示例中，元素针立即隐藏起来。如果提供了回调函数，就会立即调用回调函数。
自从jQuery 1.7，如果第一个参数提供为一个字符串，只有队列中，用这个字符串代表的动画，才会停止。
当我们需要在mouseenter事件或者mouseleave事件上变动一个元素时，.stop()方法的作用是很明显的。
<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();
});
切换动画
自从jQuery 1.7，用早地用.stop()停止一个切换动画，将触发jQuery的内部效果跟踪。在之前的版本中，在一个切换动画结束之前调用.stop()方法，会导致动画失去他的状态跟踪（如果jumpToEnd被设置为false的话）。任何后续动画将从一个新的“半路状态”开始，有时候会导致元素消失。要想观察到这种新行为，请看下面最后的示例。
通过把jQuery.fx.off设置成true，可以全局地停掉所有的动画。如果这样做的话，所有的动画方法都会立即把元素设置到它们在调用方法时设定的最终状态，而不是显示一个动画效果。
示例
点一次Go按钮，以开始动画，然后点一次Stop按钮以停止动画，让它停在当前位置。另外的选项是点击几个按钮以队列它们，看到stop只会中断当前播放的那个动画。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>stop demo</title>
<style>
div {
position: absolute;
background-color: #abc;
left: 0px;
top: 30px;
width: 60px;
height: 60px;
margin: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="go">Go</button>
<button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block"></div>
<script>
// 开始动画
$( "#go" ).click(function() {
$( ".block" ).animate({ left: "+=100px" }, 2000 );
});
// 当按钮被点击时结束动画
$( "#stop" ).click(function() {
$( ".block" ).stop();
});
// 在相反方向开始一个动画
$( "#back" ).click(function() {
$( ".block" ).animate({ left: "-=100px" }, 2000 );
});
</script>
</body>
</html>
演示结果
点击slideToggle按钮以开始动画，然后在动画结束之前再次点击它。动画将从保存的起始点切换到另一个方向。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>stop demo</title>
<style>
.block {
background-color: #abc;
border: 2px solid black;
width: 200px;
height: 80px;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="toggle">slideToggle</button>
<div class="block"></div>
<script>
var $block = $( ".block" );
// 切换一个滑移动画
$( "#toggle" ).on( "click", function() {
$block.stop().slideToggle( 1000 );
});
</script>
</body>
</html>
演示结果