当前位置: 动力学知识库 > 问答 > 编程问答 >

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 over 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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: