jquery - スクリーンショット付きのフェードタイミングの問題を伴うjQueryホバー

Question

マップの弾丸にカーソルを合わせると、フェード アウトし、スプライトの背景位置を変更してからフェード インします。しかし、このアクションが複数の弾丸にまたがってすばやく行われると、一貫性に問題が生じます。

弾丸ごとに特定のイベントを作成することなく、これを調整する方法を教えてください。

$("#map a").hover(
  function () {
    $(this).fadeOut(200, function () {
      $(this).css('backgroundPosition', '0 0');
      $(this).fadeIn(200);
    });
  },
  function () {
    $(this).fadeOut(200, function () {
      $(this).css('backgroundPosition', '');
      $(this).fadeIn(200);
    });
  }
);

脳力をありがとう！

...しかし、フェードとうまくかみ合わないいくつかの派手なツールチップの代わりに、この機能を削除するつもりだと思います。立ち寄ってくれてありがとう！

Answer 1

ブール値を使用して、現在何かをアニメーション化しているかどうかを確認できます。

animating = false;

$('.something').hover(function() {
    if(animating) {
        return;
    }
    animating = true;
    $('.other').fadeOut(200, function() {
        animating = false;
    });
});

Answer 2

デモンストレーションを見ずに、 .stop() を使用して目的の効果を達成するには、他の弾丸を停止する必要があると推測しています

$(this).stop(true, true).fadeOut(200, function () {
  $(this).css('backgroundPosition', '0 0');
  $(this).stop(true, true).fadeIn(200);
});