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

Posted 2023-02-23

【中文标题】我怎样才能顺序淡入几个div？

【英文标题】：How can I sequentially fade in several divs?

【发布时间】：2013-06-01 00:39:00

【问题描述】：

我正在尝试使用 jQuery 创建一个顺序淡入淡出。 本质上，当页面加载时，我希望三个词一个接一个地淡入。 例如： 页面加载 -> 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>

任何帮助将不胜感激。

【问题讨论】：

不工作怎么办？我添加了一个 divdisplay:none; 规则，我觉得没问题。

【参考方案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 类。

【参考方案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

【参考方案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);
        );
    );
);

【参考方案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

【参考方案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>