Question

我正在尝试使用jQuery创建顺序fadeIn。基本上，当页面加载时，我想要三个单词fadeIn，一个接一个。例如：页面加载 - ＆gt; Word1淡入 - ＆gt; Word2淡入 - ＆gt; 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>

非常感谢任何帮助。

Answer 1

jsFiddle here.

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

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

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

当然，这可以很容易地按照您的想象进行扩展 - here's another jsFiddle使用类word代替。

Answer 2

您可以编辑标记并将类添加到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>

然后调用此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’s fadeIn() function takes a second argument, 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标准promise动画队列上的fx，允许您在完成动画时触发任何您喜欢的内容 - 在这种情况下淡入下一个词。

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<H1>Este texto no será cambiado</H1>
<div id="maincontentinner">
  <p>1</p>
  <p>2</p>
  <ul>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>
<p>este texto no cambiará</p>

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

5 个答案: