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

HTML代码：

 
a
 
b
 
c
 
d
 
e
  

js代码：

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

我发现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(); }) }); }); 

小提琴

请注意，即使您为它们分配不同的动画持续时间或不同的动画，这也会起作用， queue的结果将包含上次动画结束时的挂钩。 这也支持聚合（等待所有承诺并行完成）等等。

Answer 2

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

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

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

Answer 3

使用延迟（）

 $(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小提琴

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

  
 
a
 
b
 
c
 
d
 
e