需要使用clearTimeout（）;和setTimeout）;找不到解決方案

當鼠標懸停在div（#sliderBox）上時，我需要一個div（#thumbnails）來顯示和隱藏。爲此，我使用了hoverIntent插件並像魅力一樣工作。需要使用clearTimeout（）;和setTimeout）;找不到解決方案

我也想讓div（#thumbnails）在空閒5秒鐘後淡出。我設法讓它使用setTimeout（）;

我的問題是：如果我閒置在#sliderBox div之上，當我再次移動鼠標時，#thumbnails div將不會消失。我必須將鼠標光標移出#sliderBox div，然後再次將鼠標懸停在其上，以使#thumbnails div再次淡入。

有什麼辦法解決這個問題嗎？

這是我的代碼：

$(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);}

來源

2012-03-12 Coding Monkey

問題在於插件，它將觸發對mouseenter，所以不會觸發，直到你離開，然後重新輸入。唯一的解決方案是修改插件本身，以觸發mouseenter或mousemove（僅在延遲之後）。該插件看起來很簡單，並且評論很好。我認爲這不會太難修改。

祝你好運，快點！

來源

2012-03-12 10:54:09

你的想法對我很有意義。但是我無法使其工作。我對Jquery有點新鮮。你給我一些建議嗎？ – 2012-03-12 17:51:36

你應該看看插件代碼，並試着瞭解它是如何工作的。它簡短，寫得很好，並且評論。接下來，你應該計劃你將要嘗試實現的目標。特別是在修改過的邏輯周圍 - 所以你需要通過一個變量來追蹤當前狀態（例如，活動框，淡出，淡入或淡出）。試着設計你將跟蹤這種狀態改變的想法，以及你將如何以不同的方式迴應事件。試着從廣義上思考它，不要陷入編程的細節之中。然後在提出具體問題時提出。 – 2012-03-12 20:19:48

我確實使用了狀態。我做了一個簡單的解決方案並添加了另一個變量來添加一個新狀態。該狀態用於定義縮略圖是否對定時器有效。所以基本上，如果你移動鼠標，並且這個狀態是打開的，它會調用onMouseEnter函數，縮略圖會再次淡入。這是插件現在的外觀和工作得很好：http://jsfiddle.net/Eblan85/tTjZv/再次感謝您的幫助:) – 2012-03-13 03:15:45

你應該可以做到這一點，而無需編輯插件。

除了處理文檔的'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'處理程序。

來源

2012-03-12 12:09:18

第二個想法，我建議的方法可能會抵消使用hoverIntent如此模仿插件可能會更好。 – 2012-03-12 12:47:12

說了這麼多，我不確定你是否通過處理hoverIntent中的'onmousemove'來解決同樣的問題。需要測試。 – 2012-03-12 12:55:13

需要使用clearTimeout（）;和setTimeout）;找不到解決方案

回答

相關問題