jQuery的 - 的OnLoad動畫事業部關閉，除非懸停/主動

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清除任何排隊的動畫，並在它的當前狀態中將其停止，而不是跳到動畫的結尾）