delay()

посл. ред. 25.10.2016

Метод delay() позволяет установить задержку между выполнениями анимаций или других функций в очереди.

Варианты использования

jQ_object.delay(задержка[, имя_очереди]) => jQuery: Устанавливает задержку перед запуском следующей функции в очереди. Задержка устанавливается в миллисекундах. Можно использовать ключевые слова 'fast' и 'slow', которые соответствуют значениям 200 и 600.
Если имя очереди не указано, тогда используется стандартная очередь fx.
Метод выполняется для каждого элемента текущей выборки.

Примеры

<html>
<head>
  <title>Анимация в jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <button>Старт</button>
  <div style="width: 50px; height: 50px; position: relative; background: coral"></div>
</body>
</html>
 
<script>
$('button').on('click', function() {
  $('div')
    .animate({left: '+=150'}, 'fast')
    .delay('slow')
    .animate({width: '0'}, 'slow')
    .delay('slow')
    .animate({width: '50'}, 'slow')
    .delay('slow')
    .animate({left: '-=150'}, 'fast');
});
</script>