在jQuery中的事件處理程序上組合動作

Question

下面是一個jQuery語句，它在其單擊事件上隱藏了一個div元素。無論5秒後沒有點擊，我都希望元素淡出。有沒有簡單的方法，我可以用相同的表達式調用fadeOut函數，或者沒有click事件干擾動畫？

$(".fadeOutbox").click(function(){ 
    $(this).fadeOut('slow'); 
}); 

Answer 1

我想這是另一個功能是啓動與箱內。此解決方案會在5秒後隱藏框，或者在點擊後立即隱藏。

var $box = $('.fadeOutbox'); 
var fadeOut = function() { 
    clearTimeout(timeout); 
    $box.fadeOut('slow'); 
}; 
var timeout = setTimeout(fadeOut, 5000); 
$box.click(fadeOut); 

Answer 2

嘗試

$('#div').delay(5000).fadeOut(400) 

Demo

Answer 3

編輯澄清：

var clear = setTimeout(function(){ $(".fadeOutbox").fadeOut('slow'); }, 5000); 

$(".fadeOutbox").on('click', function(){ 
    clearTimeout(clear); 
}); 

演示：http://jsfiddle.net/mGbHq/

Answer 4

使用超時不內單擊處理的：

setTimeout(function() { 
    $(".fadeOutbox").fadeOut('slow'); 
}, 5000); 

jQuery代碼就變成了：

// set a timeout for 5 seconds 
setTimeout(function() { 
    $(".fadeOutbox").fadeOut('slow'); 
}, 5000); 

// attach click handler 
$(".fadeOutbox").on("click", function() { 
    $(this).fadeOut('slow'); 
}); 

JSFIDDLE

Answer 5

保存的事實，即用戶點擊與否和定時器測試

var isClicked = false; 

setTimeout(function() { 
    if(!isClicked) 
     $(".fadeOutbox").fadeOut('slow'); 
}, 5000); 

$(".fadeOutbox").click(function() { 
isClicked = true; 
}); 

Answer 6

試試這個：

var wasClicked = false; 
$(".fadeOutbox").click(function() { wasClicked = true; }); 

setTimeout(function() { 
    if(wasClicked = false) 
     $(".fadeOutbox").fadeOut('slow'); 
}, 5000); 

Answer 7

大多數的jQuery組件鏈可以，你的函數按照原樣返回對初始對象的引用。

你可以達到你想要什麼簡單地使用：

$(".fadeOutbox").click(function() { 
    $(this).stop().fadeOut('slow'); 
}).delay(5000).fadeOut('slow'); 

基本上行文的onclick，淡出否則5秒後淡出。

Answer 8

嘗試爲超時值保存一個變量，並在用戶每次單擊時清除該變量。

Working example

// Timeout variable 
var t; 

$('.fadeOutBox').click(function() 
{ 
    $box = $(this); 
    $box.fadeIn("fast"); 

    // Reset the timeout 
    clearTimeout(t); 
    t = setTimeout(function() 
    { 
     $box.fadeOut("slow"); 
    }, 5000); 
}); 

希望這有助於你。

Answer 9

哇，沒有一個答案給出了簡單的解決方案：使用setTimeout和取消點擊超時：

$(".fadeOutbox").click(function() { 
    // Cache the jQuery object 
    var $this = $(this); 

    // Do we already have a timer running? 
    var timer = $this.data("timer"); 
    if (timer) { 
     // Yes, cancel it 
     clearTimeout(timer); 
     $this.removeData("timer"); 
    } 

    // (You may want an `else` here, it's not clear) 

    // In five seconds, fade out 
    $this.data("timer", setTimeout(function() { 
     $this.removeData("timer"); 
     $this.fadeOut('slow'); 
    }, 5000)); 
}); 

我不是100％肯定的是，以上是你想要的事件觸發，但相關兩段代碼是這樣，它的時間表定時動作：

// In five seconds, fade out 
$this.data("timer", setTimeout(function() { 
    $this.removeData("timer"); 
    $this.fadeOut('slow'); 
}, 5000)); 

與此，它取消它（例如，在點擊）：

var timer = $this.data("timer"); 
if (timer) { 
    // Yes, cancel it 
    clearTimeout(timer); 
    $this.removeData("timer"); 
}