0

ナビゲーションボタンの上にマウスを置いたときに、ホバーを使用して div の表示を切り替えようとしています。マウスオーバーがない場合、「デフォルト」の div が表示されます。

私の問題は、マウスがリンク間を移動するたびに、デフォルトの div が一時的に再表示されることです。

スワップをシームレスにすることは可能ですか、それともスワップへの別のアプローチは機能しますか? デフォルトの div のフェードアウト/フェードイン イベントを使用してナビゲーション コンテナの div を設定しようとしましたが、うまくいきませんでした。

例については、次のフィドルを参照してください: http://jsfiddle.net/ElectricCharlie/Wk8Yd/

$('div.hmnav').hover(function()
        {
        $('#_wnr00').stop(true,true).fadeOut();
        $('#_'+this.id).stop(true,true).fadeIn(400);
        },
        function ()
            {
        $('#_'+this.id).stop(true,true).fadeOut(400);
        $('#_wnr00').stop(true,true).fadeIn();      
        });
4

1 に答える 1

0

私はちょうど取り除きました、true,trueそしてそれはうまくいきました：

$('div.hmnav').hover(function () {
    $('#_wnr00').stop().fadeOut();
    $('#_' + this.id).stop().fadeIn(400);
},

function () {
    $('#_' + this.id).stop().fadeOut(400);
    $('#_wnr00').stop().fadeIn();
});

jsFiddle も更新しました。

編集:jQueryもクリーンアップするのに時間がかかりました:

$('#navbox_inner')
    .corner("round 12px")
    .parent()
    .css({padding:1})
    .corner("round 14px")

$('#navbox_inner').on({
    mouseenter: function () {
        $('#_wnr00').stop().fadeOut();
        $('#_' + this.id).stop().fadeIn(400);
    },
    mouseleave: function(){
        $('#_' + this.id).stop().fadeOut(400);
        $('#_wnr00').stop().fadeIn();
    }
},'.hmnav');

これは、1 つのアイテムにバインドされ、適切に委任されるため、はるかに高速です。純粋なクラスベース/IDベースのセレクターの方が高速であるため、要素セレクターも削除しました。jsFiddle をもう一度更新しました。

于 2013-04-02T16:24:00.547 に答える