20秒不活動後的jQuery淡入淡出對象

Question

如果用戶沒有將鼠標點擊持續20秒，我想淡出div。

我有以下代碼：

if($('.main-popup2').is(":visible")){ 
    setTimeout(function() { 
     $('.main-popup2').fadeOut('fast'); 
    }, 20000); 
} 

問題是我不知道如何的setTimeout檢測用戶鼠標點擊後復位。

謝謝！

Answer 1

.setTimeout()方法實際上會返回對它創建的定時器的引用。該參考可以在.clearTimeout中用於在計時器執行之前停止。

下面是一個如何使用這個方法的例子：

var timer; 

if($('.main-popup2').is(":visible")){ 
    // create the timer and save its reference 
    timer = setTimeout(function() { 
     $('.main-popup2').fadeOut('fast'); 
    }, 20000); 
} 

// when clicking somewhere on the page, stop the timer 
$(document).click(function() { 
    clearTimeout(timer); 
}): 

Answer 2

var timeout = null; 
var fadeElement = $('.main-popup2'); 

function fader() { 
    if(null !== timeout) { 
     clearTimeout(timeout); 
    } 
    fadeElement.stop(); 
    timeout = setTimeout(function() {fadeElement.fadeOut('fast');}, 2000); 
} 

$(document).click(fader); 
fader(); 

Answer 3

使用延時功能。

(window).click(function() { 
    $('.main-popup2').delay(6000).fadeOut(300); 
} 

每點擊一次重新啓動6秒，這。主要-popup2淡出後，如果沒有