如何使函数等到动画完成？

I have used JQuery for a small animation work: a table #photos contains 9 photos and I would like to increase the width and height using the animate function on mouseover. But while the animation is running if the user moves to mouse to another photo it automatically triggers the next animation, so it's totally confused. What should I do? My code is:

我使用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)
  });       
});

5 个解决方案

#1

JQuery offers callbacks when the animation is complete. Then it might look like this for example:

动画完成后,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; }) 
        });
});

#2

You should stop any running animation before starting a new one to avoid the mess up. It's probably the best and straightforward solution for this specific problem.

你应该在开始新动画之前停止任何正在运行的动画以避免陷入困境。对于这个特定问题,它可能是最好和最直接的解决方案。

$(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)
  });       
});

#3

In addition to the other answers I would look into using the hoverIntent plugin. This just avoids setting off a massive animation queue when the user sweeps the mouse over all photos. You only really want the animation if the user is actually hovered.

除了其他答案,我将研究使用hoverIntent插件。这样可以避免在用户将鼠标扫过所有照片时设置大量动画队列。如果用户实际上是悬停的话,你真的只想要动画。

#4

I guess the answer depends on what you want to happen on the second mousover (while the first one is still animating).

我想答案取决于你想要在第二个mousover上发生什么(而第一个仍然是动画)。

1) If you want nothing to happen, you can have your first hover set an "animating" state on the whole TR, maybe like this:

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) If you want the original animation to end so your new image can animate, you'll need to .stop() the old one with the clearQueue and goToEnd parameters set to true. This will ensure that additional queued events (from a whole bunch of hovers) don't just keep happening for minutes, and it'll make the animation immediately skip to its final state:

2)如果您希望原始动画结束以便新图像可以设置动画,则需要使用clearQueue和goToEnd参数设置为true来.stop()旧动画。这将确保额外的排队事件(来自一大堆悬停)不仅会持续几分钟,而且会使动画立即跳转到最终状态:

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

#5

Always check queue animation of element and never get conflict from now:

始终检查元素的队列动画,从此不会发生冲突:

$(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)
  });       
});

#1