jQueryのアニメーションマウスオーバー/マウスアウト見えるドロップメニューを保ちます
-
25-09-2019 - |
質問
私はアニメイトでダウンメニューの基本的なドロップをしようとしていると私は、マウスの葉まで開いドロップダウン部分を維持する方法を見つけ出すように見えることはできません問題に実行しています。開いたままにこれを伝えるための簡単な方法はありますか?私はそれに応じてメニューをアンロードしますので、私が持っていることは.clickmeマウスアウト機能について完全に間違っている知っています。
誰もがこの特定のインスタンスに役立つことができれば、私はスーパー感謝される。
$(document).ready(function() {
$('.clickme').mouseover(function() {
$('#slidebox').animate({
top: '+=160'
}, 200, 'easeOutQuad');
});
$('.clickme').mouseout(function(){
$('#slidebox').animate({
top: '-=160'
}, 200, 'easeOutQuad')
});
});
解決
これはあなたが任意のマークアップを変更することなく、軌道に乗る必要があります:
$('.clickme, #slidebox').hover(function() {
$('#slidebox').stop().animate({ top: '30px' }, 200, 'easeOutQuad');
}, function() {
$('#slidebox').stop().animate({ top: '-130px' }, 200, 'easeOutQuad');
});
あなたの要素は、親/子関係していないので、メニュー上の絶対位置を入れて簡単に(それはとにかくCSSで130px
を持っている)、それは絶対的な位置を持っているという事実を使用しない理由はありません。それに打撃を与える、私はあなたのサイトに対してテスト、私はメニューにしたいと思う行動のようです。
他のヒント
チェックアウトjqueryのhoverIntent
所属していません StackOverflow