jquery - 如何将页面内容缓慢地向下移动？

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

你可以用CSS 过渡来做到这一点

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');
});

Answer 2

您可以使用 jQuery animate()来修改 margin-bottom 属性：

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);
});