我怎样才能顺序淡入几个div？

我正在尝试使用jQuery创建顺序fadeIn。 基本上，当页面加载时我想要三个单词fadeIn，一个接一个。 例如：页面加载 – > Word1淡入 – > Word2淡入 – > Word3淡入。下一个单词只有在前一个单词完成淡入后才会淡入。此时每个单词都在其自己的div中。 这是我到目前为止所得到的，但由于某种原因，它不起作用：

 $(document).ready(function() { $('#word1').delay(500).fadeIn(1000); $('#word2').delay(1500).fadeIn(1000); $('#word3').delay(2500).fadeIn(1000); });  
Word 1
 
Word 2
 
Word 3 

任何帮助将不胜感激。

Answer 1

jsFiddle在这里。

你可以做的一种方法是使用each()循环并淡入它们：

 $(document).ready(function() { $('#word1, #word2, #word3').each(function(fadeInDiv) { $(this).delay(fadeInDiv * 500).fadeIn(1000); }); }); 

注意我正在提供一个参数fadeInDiv ，它将为三个元素中的每一个递增（返回0 ）并将其乘以延迟，因此您将相应地增加延迟（ 1000 ）等。

当然，这很容易按照你的想象进行扩展 – 这是另一个使用类word jsFiddle 。

Answer 2

您可以编辑标记并将类添加到word div：

 
Word 1
 
Word 2
 
Word 3 

然后调用这个JavaScript：

 $('.words').each(function(i) { $(this).delay(500*(i+1)).fadeIn(1000); //Uses the each methods index+1 to create a multiplier on the delay }); 

如果您没有添加新class ，则以下方法将起作用：

 $('#word1, #word2, #word3').each(function(i) { $(this).delay(500*(i+1)).fadeIn(1000); }); 

的jsfiddle

Answer 3

jQuery的fadeIn()函数接受第二个参数complete ，这是一个在淡入淡出结束时调用的函数。

所以，也许尝试这样的事情：

 $(document).ready(function () { var $word1 = $('#word1'), $word2 = $('#word2'), $word3 = $('#word3'); $word1.delay(500).fadeIn(1000,function () { $word2.fadeIn(1000, function () { $word3.fadeIn(1000); }); }); }); 

Answer 4

加布里埃尔，

您不必依赖延迟。

执行顺序动画的“正确”方法是利用jQuery标准fx动画队列上可用的promise ，允许您在完成动画时触发任何您喜欢的内容 – 在这种情况下，淡入下一个单词。

代码可以通过多种方式编写，例如：

 function f(baseID, n, t) { var jq = $("#" + baseID + n); if(jq.length) { jq.fadeIn(t).promise().done(function() { f(baseID, n+1, t); }); } }; f('word', 1, 1000); 

DEMO

写得像这样，函数f()是可重用的。 例如，您可以使用以下两个单独的淡入系列：

 f('word', 1, 1000); f('other', 1, 1000); 

DEMO

Answer 5

我已经做了一个例子，因此您可以使用.children().each() jquery函数淡出给定元素的所需子元素。 您可以非常轻松地重用代码。

 $(document).ready(function() { $("#maincontentinner").children().each(function(i) { $(this).delay((i++) * 200).fadeIn().delay(200); }); }); 

  #maincontentinner > * { display: none; } 

  
Este texto no será cambiado
 
 
1
 
2
 
 
3
 
4
 
5
 
6
 
 
 
este texto no cambiará