如何遍历 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>

Answer 2

你可以通过 .each()

$('document').ready(function() {

  $('.hidden *').each(function(index) {
    $(this).fadeIn((index + 1) * 1000).addClass('hColor' + (index + 1));
  });

})

.hColor1 {
  background: pink;
}

.hColor2 {
  background: lightblue;
}

.hColor3 {
  background: lightgreen;
}

.hColor4 {
  background: lightgrey;
}

.hColor5 {
  background: lightyellow;
}

h1.hidden * {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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 3

// get your text string
var hello = $('.hello').text();
// empty text container so we can refill it later
$('.hello').empty();
// split string by each word and save to array
var helloArray = hello.split(' ');
// adjust these values to customize how slow/fast your words appear
var delays = [400, 500, 1500, 1600, 1900];
// for each word in the array..
$(helloArray).each(function(i) {
  // cant use this inside the setTimeout function so we save this as a variable
  var pseudoThis = this;
  // begin the setTimeout function to stagger/delay the word appearance
  setTimeout(function() {
    // the html to wrap each word with for customizing css
    wordAndWrapper = '<span class="hColor n'+i+'">'+pseudoThis+'</span> ';
    // append html with variables inserted to text container
    $('.hello').append(wordAndWrapper);
  // i is used here to get the position in the delays array
  }, delays[i]);
  // if its the last word (or any word you want to emphasize as we've done with 'javascript' here)
  if (i === 4) {
    setTimeout(function() {
      // custom css styling for last word using a class
      $('.n4').addClass('grow');
    // had to make the delay 50ms more than delay of appearance so that transition in css applies
    }, 1950);
  };
})

html, body {
  margin: 0;
  background-color: hsla(0, 0%, 90%, 1);
}
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
.hello {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  text-align: center;
  font-size: 4vw;
  font-weight: bold;
}
.hColor { 
  display: flex;
  justify-content: center;
  width: 25%;
  padding: 0 30px;
  box-sizing: border-box;
  transition: all 0.2s linear;
}
.hColor.n0 { color: hsl(0, 51.2%, 49.8%); }
.hColor.n1 { color: hsl(190.7, 93.7%, 43.5%); }
.hColor.n2 { color: hsl(36, 70.9%, 51.6%); }
.hColor.n3 { color: hsl(286, 71.8%, 44.5%); }
.hColor.n4 { width: 100%; font-variant: small-caps; color: hsl(107.9, 83.6%, 45.5%); }
.hColor.n4.grow { font-size: 11vw; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <h1 class="hello">Hello Everyone Let's Learn javascript</h1>
</div>

fiddle

https://jsfiddle.net/Hastig/vorj57gs/

信用

Get text, put each word into an array .split
Using setTimeout in the .each loop

Answer 4

下面的代码执行以下操作：

从 h1 元素中获取单词并将它们按空格拆分成一个数组。
使用单词数组，它创建一个 html 字符串，每个单词周围都有 span 元素。
将 html 插入回 h1 元素。
隐藏所有跨度元素。
显示 h1 元素（但此时不会显示任何内容，因为所有 span 子元素都已隐藏）。
跨度元素一个接一个地淡入淡出。

最后一步是通过将函数作为第二个参数传递给 .fadeIn() 函数来完成的。该函数在元素完成淡入后调用。

淡化是在名为 fadeInNext() 的函数中完成的。该函数最初是为第一个子元素调用的，但是当淡入淡出完成时它会为下一个元素调用自身。这将一直持续到所有子元素都淡入为止。

$(function() {
  var $header = $('#hdr');
  
  $header.html($.map($header.text().split(/\s+/), function(word) {
    return '<span>' + word + '</span>';
  }).join(' ')).children().hide().end().show();

  (function fadeInNext($element) {
    $element.fadeIn('slow', function() {
     fadeInNext($element.next());
    });
  })($header.children(':first'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="hdr" style="display: none;">Hello everyone lets learn javascript</h1>

jsfiddle 显示可重用函数中的代码。

jsfiddle 字母而不是单词淡化。

如何遍历 h1 元素并使每个单词以 jquery 淡入？

how to iterate over an h1 element and make each word fade in with jquery?

javascript

jquery

loops

fadein