Как заставить анимацию запускать один за другим?

Код HTML:

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>

Код js:

<script type="text/javascript">
$(document).ready(function() {
    var lis = $("li");
    for (var i = 0; i < lis.length; i++) {
        $(lis[i]).animate({opacity: 0}, 1000);
    }
});
</script>

Я просто обнаружил, что lis исчезнет вместе. Как я могу это сделать, они исчезнут один за другим?

Ответ 1

Жаль, что присоединилась к партии поздно.

Существующие ответы имеют проблемы, когда таймер блокирует и полагается на точность таймеров, более того, они требуют фактической задержки.

jQuery фактически предоставляет общий способ выполнения анимаций последовательно с promises:

$(document).ready(function() {
    var lis = $("li");
    var queue = $.Deferred().resolve(); // create an empty queue
    lis.get().forEach(function(li){
        queue = queue.then(function(){
           return $(li).animate({opacity: 0}, 1000).promise();
        })
    });
});

Fiddle

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

Ответ 2

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

$(lis[i]).delay(i*1000).animate({opacity: 0}, 1000);
// ------^^^^^^^^^^^^^^

Демо: http://jsfiddle.net/p2kdpxr3/

Ответ 3

использовать delay()

$(lis[i]).delay(i * 500).animate({opacity: 0}, 1000);

DEMO

Ответ 4

Вы можете использовать delay() функция

for (var i = 0; i < lis.length; i++) {
    $(lis[i]).delay(i * 400).animate({opacity: 0}, 1000);
              ^^^^^^^^^^^^^^
}

JS Fiddle

Ответ 5

Вместо этого вы можете использовать CSS animation/transition и соответствующее событие transitionEnd со следующей логикой:

$(function() {
  var events = [
    "webkitTransitionEnd",
    "oTransitionEnd",
    "otransitionend",
    "MSTransitionEnd",
    "transitionend"
  ];


  $("li").on(events.join(" "), function(e) {
    $(this).next().addClass('animated');
  }).first().addClass('animated');
});

li {
  opacity: 1;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -ms-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}
li.animated {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>