Question

我有一个div，在文档加载时应用了以下内容：

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

如果用户将鼠标悬停在所述div上，我希望能够停止并恢复动画。

Answer 1

您可以使用jQuery.stop（）方法停止当前动画。然后指定希望新动画将元素返回的参数。例如：

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

有关详细信息，请参阅：http://api.jquery.com/stop/。

Answer 2

您可以使用.stop()方法：

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

这将立即恢复动画。 @Archonix同时回答了这个问题，展示了如何使用反向动画进行恢复。

Answer 3

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

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

它表示高度：“450px”将450px替换为您希望它恢复的任何大小。

stop（true，false）停止动画。（true清除所有排队的动画，并在其当前状态时将其停止，而不是跳到动画的结尾）

jQuery - OnLoad动画Div关闭，除非悬停/活动

3 个答案: