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

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