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

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

动画完成后,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; }) 
        });
});