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

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