我怎样才能让一个函数等待，直到动画完成？

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

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