Question

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会一起消失。我怎么能这样做，他们会一个接一个地消失？

Answer 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中的结果将包含上次动画结束时的挂钩。这也支持聚合（等待所有承诺并行完成）等等。

Answer 2

每个元素都有自己的动画队列，因此您已经看到它们同时具有动画效果，而不是等待前一个元素完成。您可以为每个元素添加延迟：

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

演示：http://jsfiddle.net/p2kdpxr3/

Answer 3

使用delay()

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

DEMO

Answer 4

您可以使用 delay() 功能

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

<强> JS Fiddle

Answer 5

您可以使用CSS animation/transition和相关的transitionEnd事件，并使用以下逻辑：

＆＃13;

$(function() {
  var events = [
    "webkitTransitionEnd",
    "oTransitionEnd",
    "otransitionend",
    "MSTransitionEnd",
    "transitionend"
  ];


  $("li").on(events.join(" "), function(e) {
    $(this).next().addClass('animated');
  }).first().addClass('animated');
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

如何让动画一个接一个地运行？

5 个答案:

-DEMO jsFiddle-