Объединение действий над обработчиками событий в jQuery

Question

Ниже приведена инструкция jQuery, которая скрывает элемент div в событии click. Я хочу, чтобы элемент исчезал независимо от того, не нажимается ли он через 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"); 
}