Jquery：mouseleaveに遅延を追加する方法。故意に要素を誤って横切っても、まだ開いたままになっています。

Question

hoverintentプラグインは、必要と反対です。 .popupは.triggerによってトリガされていますが、私が立ち去ったときに.popupを数秒間フェードアウトしないようにしたいのですが、私が立ち去った後に再び立ち上げたら、 .popupを開いたままにしておきます。

どのように私はこれを行うだろう知っていますか？

これは動作しませんが、それはアイデアだった：あなたはjqueryのhoverintentプラグインを使用して試みることができる

$('.trigger').hover(function(){ 
     $('.popup').fadeIn(600) 
    }, function() { 
     $('.popup').delay(2000, function(){ 
      if ($(this).blur() = true) { 
       $('.popup').fadeOut(600) 
      } 
     }); 
    }) 

Answer 1

jQuery HoverIntent pluginはあなたの探しているものです。

timeoutプロパティは、out関数が呼び出される前にマウスがその領域からOUTする必要がある時間を設定します。ホバー目的のWebサイトから

引用：

タイムアウト： 「アウト」機能が呼び出される前に、ミリ秒単位での単純な遅延、。タイムアウトが経過する前にユーザーがマウスの上にマウスを戻すと、 "out"関数は呼び出されません（ "over"関数が呼び出されることもありません）。これは、一時的に（そして意図せず）ターゲット要素からユーザーを引き離して、返す時間を与えてしまう、ぎこちない/人間のマウスの軌道から守るためです。デフォルトのタイムアウト：また、調整することができます

：0

...

$('.trigger').hoverIntent({ 
    over: startHover, 
    out: endHover, 
    timeout: 2000 
}); 

を、それを設定するには次にoverとout

function startHover(e){ 
    //your logic here 
    $('.popup').fadeIn(600) 
} 

function endHover(){ 
    //your logic here 
    $('.popup').fadeOut(600) 
} 

EDITを処理するための関数を定義しますinterval startHover関数の時間を増減するプロパティデフォルトは100ミリ秒に設定されています...あなたが好きならマウスがトリガーエリアに入るとすぐにポップアップを消すためにゼロに設定することができます。

Answer 2

。

Answer 3

この私の作品：

$(".triger").mouseenter(function() { 
    $(this).find("popup").fadeIn(); 
}).mouseleave(function() { 
    $(this).find("popup").delay(200).fadeOut(); 
}); 

Answer 4

はここで追加プラグインなしで、それを行うための最も簡単な方法です：

$('.trigger').hover(function() { 
    clearTimeout(this.timer); 
    $('.popup').fadeIn(600); 
}, function() { 
    this.timer = setTimeout(function() { 
     if ($(this).blur() = true) { // off topic: you should to check this condition ;) 
      $('.popup').fadeOut(600); 
     } 
    }, 2000); 
}); 

のsetTimeout（）とてclearTimeout（）は、HTML DOMウィンドウのネイティブJS関数です永遠からオブジェクト。