Jquery 我如何在几个div中依次淡入？

我正在尝试使用jQuery创建一个顺序的fadeIn。 本质上，当页面加载时，我希望有三个单词相继出现。 例如： 页面加载->Word1淡入->Word2淡入->Word3淡入。 只有在前一个单词消失后，下一个单词才会消失。 目前每个单词都在自己的div中。 到目前为止，这是我得到的，但由于某种原因，它不起作用：

<script type="text/javascript">
$(document).ready(function() { 
    $('#word1').delay(500).fadeIn(1000);
    $('#word2').delay(1500).fadeIn(1000);
    $('#word3').delay(2500).fadeIn(1000);
});
</script>

<div id="word1">Word 1</div>
<div id="word2">Word 2</div>
<div id="word3">Word 3</div>

$（文档）.ready（函数（）{
$（'#word1'）。延迟（500）。fadeIn（1000）；
$（'word2'）.delay（1500）。fadeIn（1000）；
美元("字3"),延迟(2500),法代因(1000),；
});
单词1
单词2
单词3

任何帮助都将不胜感激。

一种方法是使用

each（）

循环并淡入：

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

注意，我提供了一个参数，

fadeInDiv

，它将为三个元素中的每一个（返回

0

，

1

，

2

）递增，并将其乘以延迟，因此您将得到相应的延迟递增（

0

，

500

，

1000

）等等

当然，正如您所想象的那样，这非常容易扩展-使用类

字来代替。
，这是一个在淡入淡出完成时调用的函数

所以，不妨试试这样：

$(document).ready(function () {
    var $word1 = $('#word1'),
        $word2 = $('#word2'),
        $word3 = $('#word3');

    $word1.delay(500).fadeIn(1000,function () {
        $word2.fadeIn(1000, function () {
            $word3.fadeIn(1000);
        });
    });
});

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

<div id="word1" class="words">Word 1</div>
<div id="word2" class="words">Word 2</div>
<div id="word3" class="words">Word 3</div>

如果未添加新的
类
，则以下操作将有效：

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

加布里埃尔

你不必依赖延迟

执行连续动画的“正确”方法是利用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);


这样编写的函数
f（）
是可重用的。例如，您可以有两个独立的淡入淡入淡入系列，如下所示：

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

我举了一个例子，通过使用
.children（）.each（）
jquery函数，您可以仅淡出给定元素所需的子元素。实际上，您可以很容易地重用代码


$（文档）.ready（函数（）{
$（“#maincontentinner”）.children（）。每个（函数（i）{
$（this）.delay（（i++）*200.fadeIn（）.delay（200）；
});
});
#maincontentinner>*{
显示：无；
}

没有塞拉坎比亚多
一,

二,


三,
四,
五,
六,

este texto no cambiará
不工作怎么办？我添加了一个div{display:none；}规则，对我来说似乎还可以。
f('word', 1, 1000);
f('other', 1, 1000);