jQuery - OnLoad Animate Div to close unless hover/active

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 o开发者_开发问答ver said div.

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.

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

$("#megamenu").mouseover(function(ev) {
    $(this).stop(true,false).animate({height:"450px",opacity:1});
});

Where it says height:"450px" replace 450px with whatever size you want it to revert to.

stop(true,false) stops the animation. (true clears any queued animations and false stops it at it's current state instead of jumping to the end of the animation)

You can use the .stop() method:

$('#megamenu').mouseover(function(ev) {
    this.stop(true, false);
    this.css({ opacity: 1.0 });
    this.css({ height: original_height });
})

That will revert the animation immediately. @Archonix was answering the question at the same time showing how to revert with a reverse animation.