我有一个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
功能,但它不起作用。
我怎样才能做到这一点?
您可以使用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');
});
您可以使用jQuery animate()修改margin-bottom属性:
jQuery('#meni1_over').hover(function(){
jQuery('#move').animate({ "margin-bottom": "180px" });
});
或者,如果你愿意,你可以使用jQueryUI的addClass方法来动画添加你的CSS类:
jQuery('#meni1_over').hover(function(){
jQuery('#move').addClass("move_dol", 1000);
});