當鼠標懸停在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);}
你的想法對我很有意義。但是我無法使其工作。我對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