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）如果您希望原始动画结束以便新图像可以设置动画，则需要使用clearQueue和goToEnd参数设置为true来.stop（）旧动画。这将确保额外的排队事件（来自一大堆悬停）不仅会持续几分钟，而且会使动画立即跳到最终状态：

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

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

5 个答案: