Свернуть панель jquery через 5 секунд или разрешить ручное закрытие при нажатии

Question

Я пытаюсь открыть и закрыть слайд панели при нажатии ссылки, но я также хочу, чтобы панель рухнула через 5 секунд, если пользователь ничего не сделал. У меня такой вид работы с .delay, но в течение этих 5 секунд я не могу закрыть панель с помощью .seriesLink, потому что я не знаю, как перехватить задержку. Таким образом, панель остается открытой на 5 секунд, даже если пользователь пытается закрыть ее, снова щелкнув ссылку «Серии». Вот мой HTML и JQuery:

var container = $('.menu');
    $('.seriesLink').click(function( event ){
        // Prevent the default event
        event.preventDefault(); 
        // Toggle the slide based on its current visibility.
        if (container.is( ":visible" )){
            // Hide - slide up
            container.slideUp( );
        } 
        if (container.is(':hidden')) {
            // Show - slide down, pause 5 seconds, slide up
            container.slideDown().delay(5000).slideUp(); 
        }
    });

<a href="#" class="seriesLink">Series</a>
<div class="menu">
  <ul class="subMenu">
    <li><a href="http://www.google.com">Link title</a></li>
    <li><a href="http://www.google.com">Link title</a></li>
    <li><a href="http://www.google.com">Link title</a></li>
  </ul>
</div>

Answer 1

Использование setTimeout:

container.slideDown();
setTimeout(function () {
    if (container.is(":visible")) {
        container.slideUp();
    }
}, 5000);

Answer 2

$('.seriesLink').click(function( event ){
    // Prevent the default event
    event.preventDefault(); 
    // Toggle the slide based on its current visibility.
    if (container.is( ":visible" )){
        // Hide - slide up
        container.slideUp( );
    } 
    if (container.is(':hidden')) {
        // Show - slide down, pause 5 seconds, slide up
        container.slideDown(function(){
            var self = $(this);
            setTimeout(function() {
                self.slideUp(); 
            },5000);
        });
    }
});

выполнение этого таким образом сохранит поведение, которое вы изначально хотели: ждать 5 секунд после завершения анимации .slideDown, а затем скользить вверх.

Answer 3

Функция задержки остановит выполнение всего JavaScript в текущем контексте.Вам нужно использовать setTimeout для планирования будущего события.

Я реализовал версию в этом jsfiddle, которая будет отменять любые предыдущие события, если ссылка была нажата более одного раза:

http://jsfiddle.net/FtqG8/

Answer 4

Попробуйте в функции клика:

if (container.is(':hidden')) {
    // Show - slide down, pause 5 seconds, slide up
    container.slideDown();
    setTimeout(function(){
        container.slideUp();     
    },5000);
}