jQuery文本效果，单词一一出现 [英] jQuery text effect where words appear one by one

问题描述

有人问我是否可以使用jQuery在HTML中使用文本效果，在此我得到一个字符串，然后例程自动检测单词并将其中的每个单词动画化.

I was asked if I could come up with a text effect in HTML using jQuery where I get a string and then the routine automatically detects the words and animates each word in, one at a time.

就像.

1. sec进入动画显示:快乐"

1. sec into the animation shows: "Happy"

sec进入动画显示:"Happy New"

sec into the animation shows:"Happy New"

sec进入动画显示:新年快乐"

sec into the animation shows:"Happy New Year"

sec进入动画显示:"2011年新年快乐"

sec into the animation shows:"Happy New Year 2011"

每个词都应缓慢淡入/动画化"，我认为一个以像素为单位的简单滑动窗格会令人满意-但不行.逐字逐句.

each word should "fade/animate" in slowly, I thought a simple sliding pane going right in pixels would be satisfying - but no. Word by word.

对此我可能需要一些想法.我知道一些jQuery和许多Javascript，所以我想我需要一些有关jQuery部分的帮助.

I could need some ideas on this one. I know some jQuery and a lot of Javascript, so I guess I need a bit of help with the jQuery part.

对于单词列表，我只需要分割"(空格)并接受，.！"即可.等是单词的一部分.

For the list of words, I would just split on " " (whitespace) and accept that ",.!" etc are part of a word.

但是我如何为jQuery中的动态数组"设置动画-是在某个地方插入插件，还是我是第一个插件?

But how do I animate this "dynamic array" in jQuery - is there a plugin somewhere or am I the first?

我当时想，项目符号列表也可能是技巧，然后使其像菜单一样水平浮动，然后将该单词作为新项目符号添加，每秒一次.但是，我很高兴看到这里的专家提出了解决方案. :O)

I was thinking that perhaps a bulleted list could be the trick too, then make it float horizontally like a menu and then add the word as a new bullet, once per second. But I am excited to see what the experts in here come up with for solution. :O)

编辑 从标记的答案中，我是这样的:

EDIT From the marked answer, I've this:

    var str = $('div#greeting h1').html(); // grab text
    $('div#welcome h1').html(""); // clear text

    var spans = '<span>' + str.split(" ").join(' </span><span>') + '</span>';
    $(spans).hide().appendTo('div#greeting h1').each(function(i)
    {
        $(this).delay(500 * i).fadeIn();
    });

STRONG标记可以工作，但是文本的某些部分会成组消失.

The STRONG tag works, but somehow parts of the text fades in a group.

尝试一下: 这是一个测试文本.[strong]我们认为这比以往任何时候都要好.并查看问题.

Try this: "here is a test text. [strong]We believe this is better[/strong] than ever." and see the problem.

推荐答案

工作示例: http ://jsfiddle.net/TcdQb/

var str = $('span.ticker').text();

var spans = '<span>' + str.split(/\s+/).join(' </span><span>') + '</span>';

$(spans).hide().appendTo('body').each(function(i) {
    $(this).delay(1000 * i).fadeIn();
});

• 这会将单词放在span标签中:"<span>Happy </span><span>New </span><span>Year </span><span>2011</span>"

  创建DOM元素: $(spans)

  Creates DOM elements: $(spans)

  隐藏它们: .hide()

  Hides them: .hide()

  附加它们: .appendTo('body')

  Appends them: .appendTo('body')

  最后，使用 .each() 和

  Finally, iterates over them using .each(), and .delay() the .fadeIn() of each one by 1000ms multiplied by the current index of the iteration.

  编辑:以下是该示例的更新，该示例使用了较短的延迟和更长的动画，因此动画有些重叠.

  Here's an update to the example that uses a shorter delay, and a longer animation, so the animations overlap a little.

  http://jsfiddle.net/TcdQb/1/

      $(this).delay(400 * i).fadeIn(1000);
  

  ---

  编辑:要处理嵌套标签(仅一层深度)，您可以执行以下操作:

  ---

  To deal with nested tags (one level deep only) you could do this:

  http://jsfiddle.net/WgMrz/

  var h1 = $('div#greeting h1');
  
  h1.hide().contents().each(function() {
      var words;
      if (this.nodeType === 3) {
          words = '<span> ' + this.data.split(/\s+/).join(' </span><span> ') + ' </span>';
          $(this).replaceWith(words);
      } else if (this.nodeType === 1) {
          this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>';
      }
  });
  
     // Remove any empty spans that were added
  h1.find('span').hide().each(function() {
      if( !$.trim(this.innerHTML) ) {
          $(this).remove();
      }
  });
  
  h1.show().find('span').each(function(i) {
      $(this).delay(400 * i).fadeIn(600);
  });
  

  这篇关于jQuery文本效果，单词一一出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！