javascript - 如何遍历 h1 元素并使每个单词使用 jquery 淡入淡出？

Question

我想知道如何遍历 h1 元素，并让每个单词一个接一个地淡入淡出。

搞定了，但是代码还没干。有人可以展示并解释如何使用循环执行此操作吗？

$('document').ready(function() {
  $('#H').fadeIn(3000).removeClass("hidden").addClass("hColor1");
  $('#e').fadeIn(5000).removeClass("hidden").addClass("hColor2");
  $('#l').fadeIn(6000).removeClass("hidden").addClass("hColor3");
  $('#secondL').fadeIn(7000).removeClass("hidden").addClass("hColor4");
  $('#o').fadeIn(7300).removeClass("hidden").addClass("hColor5");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
  <h1 class="hidden"><span id="H">Hello</span> <span id="e">everyone</span> <span id="l">lets</span> <span id="secondL">learn</span> <span id="o">javascript</span></h1>
</div>

Answer 1

我不会隐藏 < h1 > 但内部的跨度，然后使用 setTimeout() 延迟每个 fadeIn()

$('document').ready(function(){
    var spans = $("h1").find("span"); // Get all spans inside <h1>
    spans.hide(); // hide spans
    var show_time = 1000; // set time for first span
    $.each(spans, function(i, item){ // item = every span
        setTimeout(function(){ // setTimeout delays events
            $(item).fadeIn('slow') // fadeIn to show each item (span)
        }, show_time); // showtime after function inside setTimeout
        show_time = show_time + 1000; // increase 1 sec for every span
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <h1 class="">
        <span id="H">Hello</span>
        <span id="e">everyone</span>
        <span id="l">lets</span>
        <span id="secondL">learn</span>
        <span id="o">javascript</span>
    </h1>
</div>