使用JQuery逐字母淡入

Question

我正在尝试获取all_msg的文本，并使用hide方法将其隐藏，然后一次以一个字母淡入淡出它的时间，这是我的代码。

var $all_msg = $('#welcome_msg');
        function animate(i) {
            $all_msg.hide();
            $all_msg.text.each(function(index) {
                $(this).delay(700 + index).fadeIn(1100);
            })
        }

这就是控制台给我的回报：

$all_msg.text.each is not a function

我是一名新编码员，如果有人可以帮助我，那将对我有很大的帮助，谢谢。

Answer 1

您需要使用检索文本.text()，然后使用您选择的分隔符将其分割（空格以获取单词列表，或使用空字符串以获取字符列表），然后为列表中的每个项目创建一个跨度并将其附加到页面上的容器中（并根据需要淡入）：

$(function() {
  //get the welcome msg element
  var $all_msg = $('#welcome_msg');
  //get a list of letters from the welcome text
  var $wordList = $('#welcome_msg').text().split("");
  //clear the welcome text msg
  $('#welcome_msg').text("");
  //loop through the letters in the $wordList array
  $.each($wordList, function(idx, elem) {
    //create a span for the letter and set opacity to 0
    var newEL = $("<span/>").text(elem).css({
      opacity: 0
    });
    //append it to the welcome message
    newEL.appendTo($all_msg);
    //set the delay on the animation for this element
    newEL.delay(idx * 70);
    //animate the opacity back to full 1
    newEL.animate({
      opacity: 1
    }, 1100);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="welcome_msg">Welcome to the example snippet</div>

更新：

这是一个欢迎标记内的标记片段：

$(function() {
  //get the welcome msg element
  var $all_msg = $('#welcome_msg');
  //get a list of letters from the welcome text
  var $wordList = $('#welcome_msg').html().split("");
  //clear the welcome text msg
  $('#welcome_msg').html("");
  //loop through the letters in the $wordList array
  var tagGoing = "";
  $.each($wordList, function(idx, elem) {

    if (elem == "<") {
      //if we encountered this symbol it means a tag started
      tagGoing += elem;
    } else if (elem == ">") {
      //if we encountered this symbol it means a tag closed
      tagGoing += elem;
      //create the tag from the collected parts and append it
      //to the output html:
      var $foundTag = $(tagGoing).appendTo($all_msg);
      $foundTag.css({
        opacity: 0
      });
      $foundTag.delay(idx * 70);
      $foundTag.animate({
        opacity: 1
      }, 1100);

      //reset the tag collector:
      tagGoing = "";
    } else {
      //if we are inside a tag
      if (tagGoing != "") {
        //if we are inside a tag, then just append the
        //current character to the output html
        tagGoing += elem;
      } else {

        //create a span for the letter and set opacity to 0
        var newEL = $("<span/>").text(elem).css({
          opacity: 0
        });
        //append it to the welcome message
        newEL.appendTo($all_msg);
        //set the delay on the animation for this element
        newEL.delay(idx * 70);
        //animate the opacity back to full 1
        newEL.animate({
          opacity: 1
        }, 1100);
      }
    }
  });

});

.banana {
  width: 100px;
  height: 100px;
  display: block;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="welcome_msg">Welcome to the
  <br/>example
  <div class="banana"></div>snippet</div>