我怎样才能让一个函数等待，直到动画完成？(How can I make a function wai

我已经使用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:

我想，答案取决于你想在第二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)
  });       
});

文章来源: How can I make a function wait until an animation completes?