Question

我试图获取all_msg的文本，并使用hide方法隐藏它，然后一次一个字母地淡化它，稍微延迟，这是我的代码。

$all_msg.text.each is not a function

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

{{1}}

我是一个新的程序员，如果有人可以帮助我，它会给我一个重大的推动，谢谢。

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>

Answer 2

您需要将每个字符包装在一个新元素中，在此实例中可能是<span />。让我们首先创建一个简单的jQuery方法来实现这一点 - 以这种方式更好地重用代码。

此方法用新元素替换元素内的每个字符，将字符包装起来。您可以传递您需要使用的任何选项。下面我们设置不透明度，并用类来标识我们的字符。

$.fn.characterize = function (wrapper, options) {
  var txt = this.text(),
      self = this;

  this.empty();


  options = options || {};

  Array.prototype.forEach.call(txt, function (c) {
    options.text = c;
    self.append($(wrapper, options));
  });
};

现在让我们用它来区分我们的单词，并分别为每个新元素制作动画。

function animate () {
  var wlc = $('#welcome');

  wlc.characterize('<span />', {
    class: 'fd',
    css: {
      opacity: 0
    }
  });

  wlc.css('opacity', 1);

  $('.fd').each(function (i) {
    $(this).animate({opacity: 1}, (i + 1) * 300);
  });
}

您还希望事先用CSS隐藏元素，并在制作动画之前再次显示它，以避免在构建元素时或在加载jQuery时出现任何闪烁。

现在一起。

DEMO

＆＃13;

$.fn.characterize = function (wrapper, options) {
  var txt = this.text(),
      self = this;

  this.empty();

  wrapper = wrapper || '<span />';
  options = options || {};

  Array.prototype.forEach.call(txt, function (c) {
    options.text = c;
    self.append($(wrapper, options));
  });
};


function animate () {
  var wlc = $('#welcome');

  wlc.characterize('<span />', {
    class: 'fd',
    css: {
      opacity: 0
    }
  });
  
  wlc.css('opacity', 1);

  $('.fd').each(function (i) {
    $(this).animate({opacity: 1}, (i + 1) * 300);
  });
}


animate();

＆＃13;

#welcome {
  opacity: 0;
}

＆＃13;

<h1 id="welcome">Welcome</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

用JQuery逐个字母淡出

2 个答案: