clearTimeout（）の使用に関するヘルプが必要です。およびsetTimeout）;解決策が見つからない

Question

div（#sliderBox）上にマウスを置いたときに表示と非表示を切り替えるdiv（#thumbnails）が必要です。そのために、hoverIntentプラグインを使用して、魅力的に働きました。

5秒間アイドル状態にするとdiv（#thumbnails）がfadeOutになります。私はそれをsetTimeout（）を使って動作させることができました。

私の問題は、次のとおりです。私は#sliderBoxの上にアイドル滞在する場合、私は再びマウスを動かすと#thumbnailsのdiv要素がフェードインしませんDIV。マウスカーソルを#sliderBox divから外し、#thumbnails div fadeInを再び作成するには、もう一度マウスカーソルを移動しなければなりません。

これを修正する方法はありますか？

これは私のコードです：

$(document).ready(function() { 

$("#thumbnails").hide(); 

$("#sliderBox").hoverIntent(showThumbs, hideThumbs); 

    var timer; 

    $(document).mousemove(function() { 

     if (timer) { 
      clearTimeout(timer); 
      timer = 0; 
     } 

     timer = setTimeout(function() { 
      $('#thumbnails').fadeOut(1000) 
      }, 5000) 
    }); 


}); 

    function showThumbs(){ $("#thumbnails").fadeIn(1000);} 
    function hideThumbs(){ $("#thumbnails").fadeOut(800);} 

Answer 1

問題がmouseenterに発射するプラグインを、であるので、あなたは再び出て、入力するまで発生しません。唯一の解決策は、プラグイン自体を変更して、mouseenterまたはmousemove（遅延後）にトリガーすることです。プラグインはかなりシンプルに見え、よくコメントされています。私はそれを変更するのが難しいとは思わない。

幸運とゴッドスピード！

Answer 2

プラグインを編集することなくこれを行うことができます。

ドキュメントの 'mousemove'を処理するだけでなく、プラグインとは独立してsliderBoxの 'mousemove'を処理しますが、同じshowThumbs()関数を呼び出します。

$(function(){ 
    var timer, $thumbnails = $("#thumbnails").hide(); 
    function showThumbs(){ 
     if($thumbnails.is(":hidden")){ 
      $thumbnails.fadeIn(1000); 
     } 
    } 
    function hideThumbs(){ $thumbnails.fadeOut(800); } 
    $("#sliderBox").on('mousemove', showThumbs).hoverIntent(showThumbs, hideThumbs); 
    $(document).on('mousemove', function(){ 
     clearTimeout(timer); 
     timer = setTimeout(hideThumbs, 5000); 
    }); 
}); 

showThumbs()ではあなたは私が$thumbnails.fadeIn(1000)条件なされていることがわかります。

コードは、この（未テスト）のようなものになります。これは厳密には不要ですが、showThumbs()の作業は少なくなります。これは重要な考慮事項であり、これは 'onmousemove'ハンドラとして添付されています。