jQuery catch when animation is finished

Question

I'm using color plugin (link to google cache, jquery.com currently off) to handle background color animations.

$(".navigation a").hover(
    function(){
        $(this).stop().animate({backgroundColor: black});
    },
    function(){
        $(this).stop().animate({backgroundColor: green});
        $(this).hide();
    }
);

Need to hide current link when animation is finished. Now it hides at once, on mouseout().

What is the solution?

Answer 1

You need to put the .hide() into the callback function of the .animate() call.

$(this).stop().animate(
    {backgroundColor: green},
    function() {
        $(this).hide();
    }
);

Answer 2

By giving .hide() a duration, it will be added to the animation queue.

So you can do this:

$(this).stop().animate({backgroundColor: green}).hide( 0 );