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

时间:2013-07-14 19:23:50

标签: jquery html animation

我有一个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移动缓慢。我尝试使用stopanimate功能,但它无效。

我怎样才能做到这一点?

2 个答案:

答案 0 :(得分: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');
});

答案 1 :(得分:1)

您可以使用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);
});