Закрытие DIV после задержки с помощью jQuery

0

У меня есть предупреждение в верхней части моего сайта, у которого есть кнопка закрытия. Здесь jQuery используется для кнопки закрытия:

/* CLOSE ALERT BAR WITH BUTTON */
$('a.ctp-alert').click(function () {
$("div.ctp-alert").slideUp();
});

Он хорошо работает на нем, но я также пытаюсь добавить еще один скрипт, который будет продвигать этот DIV после 5000 миллисекунд. Здесь jQuery, который я использую:

/* FADE OUT ALERT BAR AUTOMATICALLY */
$("div.ctp-alert").delay(5000).slideUp(500);

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

Любые идеи о том, как я могу заставить их работать вместе? Заранее спасибо.

  • 0
    Эрик, почему именно ты используешь: $ ("div.ctp-alert"). Delay (5000) .slideUp (500); за ?
  • 0
    Идея заключалась в том, чтобы отложить эту функцию slideUp на 5000 миллисекунд, но сдвинуть вверх, независимо от того, действительно ли нажата кнопка «Закрыть».
Теги:
slide

1 ответ

1
Лучший ответ

Вы не сможете использовать .delay() здесь, к сожалению, поскольку вы не можете отменить таймеры, используя $.delay.

Вместо этого напишите его с помощью setTimeout (немного более уродливого)

var timers = {};
$('a.ctp-alert').click(function () {
    $("div.ctp-alert").slideUp();
    clearTimeout(timers.hider);
    timers.hider = null;
});

timers.hider = setTimeout(function() {
   $("div.ctp-alert").slideUp(500);
   timers.hider = null;
}, 5000);
  • 0
    Спасибо! Это работает отлично. Еще раз спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню