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

Posted 2023-05-08

【中文标题】如何让函数等到动画完成？

【英文标题】：How can I make a function wait until an animation completes?

【发布时间】：2010-11-07 21:59:10

【问题描述】：

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

【问题讨论】：

提示：使用悬停功能代替 mouseover 和 mouseout。 docs.jquery.com/Events/hover

【参考方案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; ) 
        );
);

【参考方案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)
  );       
);

【讨论】：

除非你还不如把它们串起来。 $(this).stop().animate(...) 并使用“悬停”

【参考方案3】：

除了其他答案之外，我还会考虑使用 hoverIntent 插件。这只是避免了当用户将鼠标扫过所有照片时引发大量动画队列。只有当用户实际悬停时，您才真正想要动画。

【参考方案4】：

我想答案取决于您希望在第二个鼠标悬停时发生什么（而第一个鼠标悬停仍在动画中）。

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() 将 clearQueue 和 goToEnd 参数设置为 true 的旧动画。这将确保额外的排队事件（来自一大堆悬停）不会只持续几分钟，它会使动画立即跳到其最终状态：

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

【参考方案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)
  );       
);