0

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機能しません。

どうすればこれを達成できますか？

4

2 に答える 2

2

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');
});
于 2013-07-14T19:38:21.017 に答える
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);
});
于 2013-07-14T19:30:34.527 に答える