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

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

如何在屏幕上慢慢移动页面内容？

2 个答案: