.stop()

http://api.jquery.com/stop/

現在実行中のアニメーションを中止します。

.stop( [clearQueue] [, jumpToEnd] ) 1.2追加
.stop( [queue] [, clearQueue] [, jumpToEnd] ) 1.7追加
サンプル
デモ

.stop( [clearQueue] [, jumpToEnd] ) 1.2追加

戻り値:jQuery

引数	説明
[clearQueue]	Boolean値で、キューアニメーションを削除するかどうかを指定します。初期値はfalseです。
[jumpToEnd]	Boolean値で、現アニメーションを即座に完了するかどうかを指定します。初期値はfalseです。

.stop( [queue] [, clearQueue] [, jumpToEnd] ) 1.7追加

戻り値:jQuery

引数	説明
[queue]	停止するアニメーションのキュー名を指定します。
[clearQueue]	Boolean値で、キューアニメーションを削除するかどうかを指定します。初期値はfalseです。
[jumpToEnd]	Boolean値で、現アニメーションを即座に完了するかどうかを指定します。初期値はfalseです。

サンプル

animateの基本的な使い方です。

<div id="hoverme">
  Hover me
  <img id="hoverme" src="book.png" alt="" width="100" height="123" />

$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});

デモ

<!DOCTYPE html>
<html>
<head>
  <style>div {
position: absolute;
background-color: #abc;
left: 0px;
top:30px;
width: 60px;
height: 60px;
margin: 5px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.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;
width: 200px;
height: 80px;
margin: 10px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.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>