0

onmouseoverとonmouseoutを使用してSlideOutやFadeInなどのアニメーションを使用するように変更したドロップダウンメニューを使用しています。この問題は、すべてのネストされたリストを数回ホバーした後に発生し、その結果、2番目のネストされたリストが切断されます。
「nav1」から「nav2」に移動して、すばやく元に戻すことで、バグを再現できます。

jsFiddleへ

のリンクカットオフのスクリーンショット：
http
：//dl.dropbox.com/u/53879403/screenshot.png アドバイス/批評をお願いします。

4

2 に答える 2

1

このフィドルをご覧ください：http：//jsfiddle.net/SuRJ9/

私が変更したコード：

function slideDown(toSlide) {
    currentHover(toSlide);
    $($(toSlide).children('ul')[0]).slideDown('medium',
        function(){   $(this).css('overflow','visible') });
}

アニメーション終了後にリセットoverflowを追加しました。スライドアニメーションを作成するために、jQueryによってに設定されます。visibleoverflowhidden

onmouseout="slideUp(this)"また、 andは使用しないでくださいonmouseover="slideDown(this)"。これは控えめなJavaScriptであり、悪いテクニックです。これらのイベントは、jQueryを使用して割り当てる必要があります。

于 2012-08-18T17:26:00.777 に答える
1

$.fadeOut/In()アニメーションを実行する前に、特定のスタイルを適用します。これらは、アニメーションが完了すると削除されます。

あなたfadeOutNav()はstop（true）を呼び出しています。これは、fadeOut（）またはfadeIn（）が機能しているときに実行されると、要素に適用されたスタイルを残します。この場合、overflow：親ulに隠されています。ストップを取り外してエフェクトをバブルアップさせるか.css('overflow','')、チェーンにを挿入することができます。

于 2012-08-18T17:33:46.767 に答える