←→ボタンで左右に矩形が一定量移動します。移動中にSTOPボタンを押すと、アニメーションが中止されて停止します。
移動ボタンを複数回連打すると、それらはqueueに溜まって連続して実行されます。STOPボタンによりキャンセルされるのは現在動作中の動きだけで、すぐに次のqueueが始まることを確認できます。
Effects/API/jQuery
stop()
指定した要素集合から、現在動作中のアニメーション処理を全て中止します。
他のアニメーションがqueueに入ってる場合、次のアニメーションが直ちに実行されることになります。
他のアニメーションがqueueに入ってる場合、次のアニメーションが直ちに実行されることになります。
サンプル
サンプル1
// 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);
});
[全コードを表示]
[実行結果を単体で表示]