jquery - 等到这个动画完成后再在另一个链接上重复

Question

我对这段代码有点麻烦

    $('.tree-item').hover(function() {

    $('#_'+this.id).fadeIn().delay(500).animate({ left: "0px" }, 200);

},function () {
    $('#_'+this.id).animate({ left: "3000px" }, 200, function(){
        $(this).fadeOut().css('display', 'none').animate({ left: "-3000px" }, 300);
    });
    $(this).stop();    
});

我有一棵带有链接的树，当链接悬停在上面时，这段代码会带来带有内容的云。

我需要它等到最后一个链接悬停操作完成后再开始当前链接操作，因为如果用户快速将鼠标悬停在链接上，它看起来会非常混乱。

你可以在这里查看我的意思http://foc.dev.lemon-fresh.co.uk/#program

谢谢你的时间。

Answer 1

所有 jQuery 动画函数都有一个complete回调方法，该方法将在动画完成时执行。

.animate（属性[，持续时间] [，缓动] [，完成]）

参考：http ://api.jquery.com/animate/

$(this).animate({}, 200, null, function() {
    //do this when ready...
});