jquery - jQuery - Mouseleave が起動しない

Question

水平ドロップダウンメニューにjQueryマジックを挿入しようとしています。mouseover/mouseenter期待どおりに動作しmouseleaveますが、発砲していないようです。ここに次のフィドルを設定しました: http://jsfiddle.net/shalan/c28cU/8/。

ABOUTにカーソルを合わせると、2 番目のレベルはフェードしてABOUTの下のビューにスライドアップするように意図されています (実際に実行されます) がmouseleave、フェードアウトとスライドダウンを同時に行うのではなく、単純に消えます。

何が問題なのかをトラブルシューティングしようとしていますが、アイデアが不足しています。上記の Fiddle を見ると、CSS の次の行 (CSS ペインの 38 行目) が表示されます。

/* INITIAL STYLING FOR 2ND LEVEL UL CONTAINER */
nav ul li ul {
    display:none;
    position:absolute;
    background:#777;
    top:50px;
}

display:none;行をコメントアウトすると、期待どおりに機能しますが、 ABOUTリスト項目mouseleaveの下の領域にカーソルを合わせると明らかにアクティブになります。、、およびを使用してさまざまな JS メソッドも試しましたが、後者は機能しません。on()hover()bind()

この段階では、JS の問題なのか CSS の問題なのかわかりません。この点で何かお役に立てば幸いです。どうもありがとう！

Answer 1

ちょっとここにあなたのための実用的なフィドルがあります

http://jsfiddle.net/Gkp34/

css を削除し、代わりにホバー時に js を使用しdisplay: none;てスタイリングを設定しました。block

mouseleave で、display: noneアニメーションが完了したときに設定するアニメーションのコールバックを設定しました。

function usingOn() {
    nav.on({
        mouseenter: function() {
            $(this).find('ul').css('display','block').eq(0).stop(true, true).animate({ opacity:'1' , top: '40px' }, { duration:200, queue:false });
        },
        mouseleave: function() {
            $(this).find('ul').eq(0).stop(true, true).animate({ opacity:'0' , top: '50px' }, { duration:300, queue:false, complete: function () {
                            // Animation complete.
                            $(this).css('display','none');
                        } });  
        }
    });
}

これは、usingBind()またはusingHover()関数でも機能するはずです。

Answer 2

mouseleave の代わりに mouseout を使用してみてください...