0

マウスが休止状態のときにナビゲーション メニューを 50% の不透明度にフェードアウトする次のコードを作成しました。

var hidden, fadenav, dimNav = function () {
    hidden = true;
    $('#main-nav').animate({'opacity': 0.5}, 200);
};

$('document').ready(function () {
    dimNav();
    $('body').on('mousemove', function (e) {
        if (hidden) {
            $('#main-nav').animate({'opacity': 1}, 200);
            hidden = false;
        }
        if (fadenav !== null) {
            clearTimeout(fadenav);
        }
        fadenav = setTimeout(dimNav, 500);
    });
});

#main-nav私がやりたいのは、ユーザーが要素の上にマウスを置いたときにフェードしないようにすることです。

私はこれを無駄にしようとしました:

$('#main-nav').on('mouseover mouseout', function (e) {
    if (e.type === 'mouseover') {
        clearTimeout(fadenav);
    } else {
        fadenav = setTimeout(dimNav, 500);
    }
});

誰もこれを行う方法を知っていますか?

4

2 に答える 2

1

これは確かにコードが少ないわけではありませんが、もう少し簡単かもしれません。

​$('#main-nav').on('mousemove',function(e){
    if(hidden){
        $('#main-nav').animate({'opacity': 1}, 200);
        hidden = false;
    }  
    clearTimeout(fadenav);
    e.stopPropagation();
});

代わりにそれを追加します：

$('#main-nav').on('mouseover mouseout', function (e) {
    if (e.type === 'mouseover') {
        clearTimeout(fadenav);
    } else {
        fadenav = setTimeout(dimNav, 500);
    }
});

クラスで遊ぶ必要はまったくありません。

ここに私の作業サンプルがあります: http://jsfiddle.net/TbwSA/1

編集: mouseout イベントさえ必要ないことに気付きました。

于 2012-12-14T21:02:39.203 に答える
0

私は自分で解決策を発見し、他の人が知っておく価値があるかもしれないと考えました:

まず、次のようなことを行う必要があります。

$('#main-nav').on('mouseover', function (e) {
    if (!$('#main-nav').hasClass('hovered')) {
        $('#main-nav').addClass('hovered');
    }
}).on('mouseout', function () {
    if ($('#main-nav').hasClass('hovered')) {
        $('#main-nav').removeClass('hovered');
    }
});

次に、dimNav()関数を次のように変更します。

dimNav = function() {
    if (!$('#main-nav').hasClass('hovered')) {
        hidden = true;
        $('#main-nav').css('opacity', '0.5');
    }
};

誰かがこれよりも良い方法を考えられる場合は、貢献してください!

于 2012-12-14T20:26:30.447 に答える