jquery - 一定のアニメーションを停止する方法

Question

ここで私のコードを見てください: http://jsfiddle.net/FVcJz/7/

テキストにカーソルを合わせると、アニメーションが表示されます。テキスト上でマウスを 5 回ホバーすると、ボックスが 5 回アニメーション化されます。最初のアニメーションがまだ終了していないときに残りの 4 つのアニメーションを防止するコードを設定する方法?! 前のホバーでアニメーションが進行中でない場合にのみアニメーションを実行することを意味します..そのため、テキスト上で 5 回ホバーすると、アニメーションは 1 回だけ実行されます (4 回のホバーがアニメーション終了前の場合)。

Answer 1

stopメソッドを使用できます。

$(function () {

$(".tt").hover(function(){

    $(".bb").stop().animate({width:'150px'}, 500);  

},function() {

    $(".bb").stop().animate({width:'100px'}, 500);  


});     
});

</ p>

Answer 2

まず、コードが機能していないため、これは正しいコードです: jsFiddle

アニメーションが停止する前に n 回クリックしても、アニメーションに問題はありません。どのブラウザを使用しましたか?

Answer 3

アニメーションが既に進行中の場合は、jquery ':animated' セレクターでテストできます。

if (!$(".bb").is(':animated'))
{
  //no animation yet
  $(".bb").animate(...);
}