链接影响不同元素的jQuery动画

$(document).ready(function() { $("#div1").fadeIn("slow"); $("#div2").delay(500).fadeIn("slow"); $("#div3").delay(2000).fadeIn("slow"); $("#div4").delay(8000).fadeIn("slow"); }); 

这是我目前的设置，但我觉得这不是写这个的最好方法。 我找不到任何关于你如何更好地为时间写这个的例子。 有帮助吗？ 我很感激。

我还要补充一点，每个元素的时间不一致。

Answer 1

fadeIn将回调作为其第二个参数。 动画完成后立即执行该回调。 如果您希望元素按顺序淡入，则可以链接回调：

 $(document).ready(function() { $("#div1").fadeIn("slow", function(){ $("#div2").fadeIn("slow", function(){ $("#div3").fadeIn("slow", function(){ $("#div4").fadeIn("slow"); }); }); }); }); 

如果你觉得这样，可以使用一系列选择器和一个方法重写它：

 var chain = function(toAnimate, ix){ if(toAnimate[ix]){ $(toAnimate[ix]).fadeIn('slow', function(){ chain(toAnimate, ix + 1 )}); } }; $(document).ready(function(){ chain(['#div1', '#div2', '#div3', '#div4'], 0); }); 

在JSBin中查看最后一个 。

Answer 2

这可以从1.8开始优雅地完成：

 $("div").toArray().map(function(e){ return function(){ return $(e).fadeIn(600).promise() }; }).reduce(function( cur, next ){ return cur.then(next); }, $().promise()); 

http://jsfiddle.net/f3WzR/

Answer 3

只要你谈论一致的增量（并且只要它们在页面上以相同的顺序出现），我就会循环执行。

 $("#div1,#div2,#div3,#div4").each(function( idx ) { $(this).delay( idx * 1000 ).fadeIn("slow"); }); 

示例： http ： //jsfiddle.net/km66t/

这使用.each()传递的索引来增加延迟。

所以你有效地做了：

 $("#div1").delay( 0 ).fadeIn("slow"); $("#div2").delay( 1000 ).fadeIn("slow"); $("#div3").delay( 2000 ).fadeIn("slow"); $("#div4").delay( 3000 ).fadeIn("slow"); 

---

编辑：为了解决下面评论中的问题，您可以改为存储要使用的延迟数组，并使用.each()的索引访问数组的正确索引。

 var delays = [0, 1000, 2000, 4000]; $("#div1,#div2,#div3,#div4").each(function( idx ) { $(this).delay( delays[ idx ] ).fadeIn("slow"); }); 

Answer 4

对提供的答案不满意，这是我使用的：

  var $steps = $('#div1, #div2, #div3'); // iterate throught all of them $.each($steps,function(index,value){ $stage.fadeIn('slow', function(){ // You can even do something after the an animation step is completed placing your code here. // run the function again using a little introspection provided by javascript arguments.callee }); }) 

这样您就不必申报延迟。