单词一个一个出现的jQuery文本效果

Question

有人问我是否可以使用 jQuery 在 HTML 中创建一个文本效果，其中我得到一个字符串，然后例程会自动检测单词并为每个单词设置动画，一次一个。

喜欢。

1. 进入动画显示秒：“快乐”

2. 进入动画显示：“Happy New”

3. 秒入动画节目：《新年快乐》

4. 秒入动画节目：《2011新年快乐》

每个单词都应该“淡入淡出/动画化”，我认为一个简单的以像素为单位的滑动窗格会令人满意 - 但不是。一个字一个字。

我可能需要一些关于这个的想法。我知道一些 jQuery 和很多 Javascript，所以我想我需要一些关于 jQuery 部分的帮助。

对于单词列表，我只会拆分“”（空格）并接受“,.!” etc 是单词的一部分。

但是我如何在 jQuery 中为这个“动态数组”设置动画 - 是否有某个插件或者我是第一个？

我在想也许一个项目符号列表也可能是诀窍，然后让它像菜单一样水平浮动，然后将单词添加为新项目符号，每秒一次。但我很高兴看到这里的专家想出什么解决方案。 :O)

编辑 从标记的答案，我有这个：

    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 标记有效，但不知何故，部分文本在一组中淡出。

试试这个： “这是一个测试文本。[strong]我们相信这比以往任何时候都更好[/strong]。”看看问题。

Answer 1

工作示例： 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)

• 隐藏它们：.hide()

• 附加它们：.appendTo('body')

• 最后，使用.each() 和.delay() 对它们进行迭代，每个.fadeIn() 乘以1000ms 乘以迭代的当前索引。

---

编辑：这是对示例的更新，它使用更短的延迟和更长的动画，因此动画重叠了一点。

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

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

---

编辑：要处理嵌套标签（仅深一层），您可以这样做：

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);
});

Answer 2

我不是专家，但也许你想多了。怎么样：

   var fadeWordsIn = function(elem$) {
      var txt = elem$.text().split(' ');
      elem$.empty();
      var pushIt = function() {
          if (txt.length) {
              var word = txt.shift();
              var span$ = $("<span>" + word + " </span>");
              elem$.append(span$);
              span$.hide().fadeIn(1000, pushIt);
          }
       };
       pushIt();
  };

Answer 3

你想要这里的“BlockFadeIn by word”动画：http://dev.seankoole.com/jquery/ui-effect/text.html

刚刚发布！