5

我正在尝试使用 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>

任何帮助将不胜感激。

4

5 回答 5

7

jsFiddle在这里。

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

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

请注意，我提供了一个参数 ，fadeInDiv它将为三个元素中的每一个（返回0、1、2）递增并将其乘以延迟，因此您将得到相应的延迟递增（0、500、1000）等。

当然，正如您想象的那样，这很容易扩展 -这是另一个使用类的 jsFiddleword。

于 2013-06-01T00:41:59.057 回答
4

您可以编辑您的标记并将类添加到您的worddiv：

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

如果您没有添加 new class，则以下内容将起作用：

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

jsfiddle

于 2013-06-01T00:58:19.857 回答
1

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);
        });
    });
});
于 2013-06-01T00:47:21.430 回答
1

加布里埃尔，

您不必依赖延迟。

执行顺序动画的“正确”方法是利用promisejQuery 标准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);

演示

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

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

演示

于 2013-06-01T04:12:54.890 回答
0

.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>

于 2015-02-20T17:26:50.187 回答