アニメーションが完了するまではどのように機能待機を行うことができますか？

Question

私は小さなアニメーション作品のためのjQueryを使用している：テーブル#photosは9枚の写真が含まれていると私はマウスオーバーでanimate機能を使用して、幅と高さを増加したいと思います。しかし、ユーザーは、それが自動的に次のアニメーションをトリガーする別の写真にマウスを移動し、それは完全に混乱していた場合にアニメーションが実行されている間。私は何をすべきか？私のコードは次のとおりです。

$(function(){
  $("#photos tr td img").mouseover(function(){
    $(this).animate({"width":"1000px","height":"512px"},2000)
  });
  $("#photos tr td img").mouseout(function(){
    $(this).animate({"width":"100px","height":"50px"},2000)
  });       
});

Answer 1

アニメーションが完了したときにjQueryのコールバックを提供しています。 そして、それは例えば次のようになります。

var animating = false;
$(function(){ $("#photos tr td img").mouseover(
    function()
    {
        if(!animating)
            $(this).animate({"width":"1000px","height":"512px"},2000, easing, function() { animating = true; });
    }); 

    $("#photos tr td img").mouseout(
        function()
        {
            $(this).animate({"width":"100px","height":"50px"},2000, easing, function() { animating = false; }) 
        });
});

Answer 2

あなたは混乱アップを避けるために、新しいものを開始する前に、実行中のアニメーションを停止する必要があります。 これはおそらく、この特定の問題のために最善かつ簡単なソリューションです。

$(function(){
  $("#photos tr td img").mouseover(function(){
    $(this).stop();
    $(this).animate({"width":"1000px","height":"512px"},2000)
  });
  $("#photos tr td img").mouseout(function(){
    $(this).animate({"width":"100px","height":"50px"},2000)
  });       
});

Answer 3

他の回答に加えて、私は hoverIntentするを使用してになりますプラグイン。これは単に、ユーザーがすべての写真の上にマウスをスイープしたときに大規模なアニメーションキューをオフに設定避けることができます。ユーザが実際に推移している場合にのみ、実際にアニメーションを使用します。

Answer 4

私は答えは、あなたが（最初のものはまだアニメーションしている間）は、第2のmousoverに起こるしたいものに依存思います。

あなたは何も起こらないようにしたい場合は、

1）、あなたは、あなたの最初のホバーは全体TRに「アニメーション」状態を設定することができます多分このような：

  $tr = $(this).closest("tr");
  if ($tr.data("animating") != true) {
      $tr.data("animating",true);
      $(this)
        .stop(true,false)
        .animate({"width":"1000px","height":"512px"},2000, function(){
          $tr.data("animating",false);
      });
  }

あなたがオリジナルのアニメーションをので、あなたの新しいイメージをアニメーション化することができます終了したい場合は、

2）、あなたは（.stopする必要があります）trueに設定clearQueueとgoToEndパラメータを持つ古いもの。

：これは（ホバーの全体の束から）追加のキューに入れられたイベントは、わずか数分のために起こって保管しないで、アニメーションはすぐにその最終状態へスキップ作ってあげることを保証します

  $(this).closest("tr").find("img:animated").stop(true,true);
  $(this).animate({"width":"1000px","height":"512px"},2000});

Answer 5

常に要素のキューアニメーションをチェックして、今から競合を取得することはありません。

$(function(){
  $("#photos tr td img").mouseover(function(){
    if($(this).queue("fx").length == 0)
       $(this).animate({"width":"1000px","height":"512px"},2000)
  });
  $("#photos tr td img").mouseout(function(){
       $(this).animate({"width":"100px","height":"50px"},2000)
  });       
});