如何將頁面內容緩慢地移動到屏幕上？

Question

我有一個HTML頁面，當我將鼠標移到菜單上時，我希望頁面的內容向下移動，以便菜單不在頁面上。

HTML

<div id="move"> 
</div> 

CSS

.move_dol { 
clear: both; 
margin-bottom: 180px !important; 
} 

jQuery('#meni1_over').hover(function(){ 
jQuery('#move').addClass('move_dol'); 
}); 

但我想，這move_dol緩慢地移動。我試過stop和animate函數，但它不起作用。

我怎樣才能做到這一點？

Answer 1

您可以使用jQuery animate()修改邊距屬性：

jQuery('#meni1_over').hover(function(){ 
    jQuery('#move').animate({ "margin-bottom": "180px" }); 
}); 

或者，如果你願意，你可以使用jQuery UI的addClass方法動畫加入你的CSS類：

jQuery('#meni1_over').hover(function(){ 
    jQuery('#move').addClass("move_dol", 1000); 
}); 

Answer 2

您可以使用CSS Transitions

CSS轉換

.move_dol { 
    clear: both; 
    margin-top: 180px !important; 
    -webkit-transition: margin 1000ms ease-in-out; 
    -moz-transition: margin 1000ms ease-in-out; 
    transition: margin 1000ms ease-in-out; 
} 

jQuery的

jQuery('#meni1_over').hover(function(){ 
    jQuery('#move').addClass('move_dol'); 
});