3

小さなアニメーション作業にJQueryを使用しました。テーブルには9枚の写真が含まれており、マウスオーバーの関数を#photos使用して幅と高さを増やしたいと思います。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)
  });       
});
4

5 に答える 5

6

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; }) 
        });
});
于 2009-07-03T11:41:15.510 に答える
4

混乱を避けるために、新しいアニメーションを開始する前に、実行中のアニメーションを停止する必要があります。これはおそらく、この特定の問題に対する最善かつ直接的な解決策です。

$(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)
  });       
});
于 2009-07-03T11:52:28.197 に答える
1

他の回答に加えて、hoverIntentプラグインの使用を検討します。これにより、ユーザーがすべての写真の上でマウスをスイープしたときに、大規模なアニメーションキューが開始されるのを回避できます。ユーザーが実際にホバーされている場合にのみ、アニメーションが本当に必要になります。

于 2009-07-03T12:02:30.700 に答える
1

答えは、2番目のムーバーで何をしたいかによって異なると思います（最初のムーバーはまだアニメート中です）。

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）新しい画像をアニメーション化できるように元のアニメーションを終了する場合は、clearQueueパラメーターとgoToEndパラメーターをtrueに設定して古いアニメーションを.stop（）する必要があります。これにより、キューに入れられた追加のイベント（多数のホバーから）が数分間発生し続けるのではなく、アニメーションがすぐに最終状態にスキップされます。

  $(this).closest("tr").find("img:animated").stop(true,true);
  $(this).animate({"width":"1000px","height":"512px"},2000});
于 2009-07-03T20:08:56.860 に答える
0

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

$(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)
  });       
});
于 2012-06-20T09:27:21.073 に答える