Таймер обратного отсчета jQuery

В настоящее время у меня этот код

setTimeout(function() { $('#hideMsg').fadeOut('fast'); }, 2000); 

возможно ли установить таймер обратного отсчета на 2 секунды?

подобно

 
The entry you posted not valid. This Box will Close In 2 Seconds

«Эта коробка закрывается за 2 секунды» автоматически изменится на 2 сек 1 сек.

используйте setInterval вместо setTimeout , затем с комбинацией clearInterval

 var sec = 2 var timer = setInterval(function() { $('#hideMsg span').text(sec--); if (sec == -1) { $('#hideMsg').fadeOut('fast'); clearInterval(timer); } }, 1000); 

HTML

 
The entry you posted not valid. This Box will Close In 2 Seconds

сумасшедшая демонстрация


Сделать это лучше.

 var sec = $('#hideMsg span').text() || 0; var timer = setInterval(function() { $('#hideMsg span').text(--sec); if (sec == 0) { $('#hideMsg').fadeOut('fast'); clearInterval(timer); } }, 1000);​ 

так что время будет зависеть от того, что находится внутри . Например, 2 составляет 2 секунды, 5 – 5 секунд, а 60 – 1 минута.

еще одна сумасшедшая демонстрация

Заметка:

Я не понимал, как это было похоже на ответ Рейгеля, пока я не прочитал его ответ. В основном, единственное различие заключается в том, что я использую .delay() чтобы скрыть div вместо интервала. Различные варианты …


Если вы поместите начальное число в это будет отсчитываться до нуля от любого числа:

 $(function() { // Number of seconds counter starts at is what's in the span var timer, counter = $("#hideMsg span").text(); // Delay the fadeout counter seconds $('#hideMsg').delay(counter * 1000).fadeOut('fast'); // Update countdown number every second... and count down timer = setInterval(function() { $("#hideMsg span").html(--counter); if (counter == 0) { clearInterval(timer)}; }, 1000); });​ 

Пример jsFiddle

Это использует родной .delay() jQuery, и он использует setInterval() который останавливается, когда он достигает нуля.

Сделайте еще один тайм-аут после второй секунды и установите .html () для div следующим образом:

 setTimeout(function() { $('#hideMsg').html('The entry you posted not valid. 
This Box will Close In 1 Second'); }, 1000);

Поместите их в функцию и запустите функцию onload следующим образом:

  

надеюсь это поможет.

  • Равномерность объекта jQuery
  • Проверка формата адреса электронной почты с помощью Jquery.validate.js
  • Оберните каждые 3 divs в div
  • Как сделать выпадающий список только с использованием jquery?
  • Подтвердить удаление модального / диалогового windows с загрузкой Twitter?
  • Google Maps v3 частично загружается в верхнем левом углу, событие изменения размера не работает
  • Как создать thead и tbody в таблице ASP.NET?
  • мобильное хромирование огней событие изменения в прокрутке
  • Проверьте, имеет ли текстовое поле пустое значение
  • Можно ли удалить встроенные стили с помощью jQuery?
  • Что делает функция function ($) {$ (function () {})} (window.jQuery)?
  • Давайте будем гением компьютера.