Question

I have a div that has the following applied to it on document load:

$("#megamenu").delay(3000).animate({height:"hide",opacity:"hide"}, 5000);

What I want to be able to do is stop and revert the animation if a user hovers over said div.

Answer 1

You can use the jQuery.stop() method to stop the current animation. Then specify the parameters you wish the new animation to return the element to. For example:

$("#megamenu").delay(3000).animate({height:"hide",opacity:"hide"}, 5000).mouseover(function() {
    $(this).stop(true, false).animate({height: "100px", opacity: 1}, 1000);
});

See: http://api.jquery.com/stop/ for details.