0

クリックしたリンクに応じて表示/非表示になるコンテナがあります。

流れ：

  • メニューボタンをクリックすると、コンテナがタイマー付きで 2 秒間表示され、その後フェードします
  • コンテナ内のリンクをクリックして、コンテナがフェードしないようにします
  • メニューボタンをもう一度クリックすると、コンテナが再びフェードします

奇妙なことに、最後のステップの後、ホバーしてからマウスを離してもコンテナはフェードしません。私はもう試した。私は正しく電話していないと感じていon()ます。

これを 内で使用して$('.menu-control').on('click')、マウスリーブを再度許可しようとしましたが、定義する必要があると思います。

$('#module-container').on('mouseleave');

ホバー全体を関数内にラップし、名前を付けて、メニューボタンがクリックされたときに呼び出すなど、他のいくつかの方法を試しました。失敗。

これは、ビデオが背景として再生されているときに、メニュー ボタンをクリックした後に「オプション」が表示され、邪魔にならないようにフェードするように実装されます。コンテナ内のリンクは実際にビデオを停止し、フェードし、オプションはページにとどまります。

これがJSFIDDLEの私のバージョンです

4

1 に答える 1

0

そのようなイベント ハンドラーを再度有効にすることはできません。これを使用する.off()と、指定されたイベント ハンドラーが要素から削除されます。したがって、ハンドラーを再登録する場合は、ハンドラー参照をメソッドに再度渡す必要があります.on()。

ハンドラ参照は複数回使用する必要があるため、独立した関数として記述し、複数の場所から参照できるようにすることをお勧めします

あなたはそれを次のように書く必要があります

$('.menu-control').on('click', function() {
    $('#module-container').fadeIn(300);
    window.mtimer = setTimeout(function(){ $('#module-container').fadeOut(300); }, time);
    //The following commented line doesn't work. I want to reallow the mousleave function, defined below (marked as HERE)
    $('#module-container').on('mouseleave', mouseenter);
});

function mouseenter(){
    clearTimeout(window.mtimer); 
}
function mouseleave(){
    window.mtimer = setTimeout(function(){ $('#module-container').fadeOut(300); }, time);
}

var time = 2000;
$('#module-container').on({
    mouseenter: mouseenter,
    //HERE
    mouseleave: mouseleave
});

$('.stopme').on('click', function(e) {
    $('#module-container').show().off('mouseleave');
    e.preventDefault();
});
于 2013-08-01T02:42:20.330 に答える