Question

I am having a little trouble with this piece of code

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

I have a tree with links on and this piece of code brings in a cloud with content when the link is hovered over.

I need it to wait until the last link hover actions are complete before starting the current link actions as it can look very messy if the user hovers quickly over the links..

You can view what I mean here http://foc.dev.lemon-fresh.co.uk/#program

Thanks for your time.

Answer 1

All jQuery animation functions have a complete callback method which will be executed when the animation is complete.

.animate( properties [, duration] [, easing] [, complete] )

ref: http://api.jquery.com/animate/

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