单词一个一个出现的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. 秒入动画节目:《快乐》

1. sec into the animation shows: "Happy"

秒入动画节目:《Happy New》

sec into the animation shows:"Happy New"

秒入动画节目:《新年快乐》

sec into the animation shows:"Happy New Year"

秒入动画节目:《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.

对于单词列表，我只会拆分"(空格)并接受,.!"etc 是单词的一部分.

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]我们相信这比以往任何时候都更好[/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><跨度>2011</span>"

  创建 DOM 元素:$(spans)

  Creates DOM elements: $(spans)

  隐藏它们:.hide()

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

  最后，使用 .each()，以及 .delay() .fadeIn() 每一项乘以1000ms乘以当前迭代的索引.

  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屋！