使用JQuery逐字母淡入 [英] Fade in letter by letter with JQuery

问题描述

我正在尝试获取all_msg的文本，并使用hide方法将其隐藏，然后一次将其淡入一个字母，并稍有延迟，这就是我的代码.

I'm trying to get the text of the all_msg, and with the hide method to hide it and then fade it in one letter at a time, with a tiny delay, this is my code.

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

这就是控制台给我的回馈:

and this is what the console is giving me back:

$all_msg.text.each is not a function

如果有人能帮助我，我将是一名新编码员，这将对我有很大的帮助，谢谢.

I'm a new coder if someone can help me it will give me a major boost, thanks.

推荐答案

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

you need to retrieve the text with .text(), then split it with a delimiter of your choice (space to get a list of words, or empty string to get a list of characters), then create a span for each of the items in the list and append it to a container on your page(and fade them if you want):

$(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>

更新:

以下是在欢迎文本中注意标记的代码段:

here is a snippet that minds markup inside the welcome 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').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>

这篇关于使用JQuery逐字母淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！