jQuery 文本效果，其中单词一一出现

Question

有人问我是否可以使用 jQuery 在 HTML 中设计出一种文本效果，我可以在其中获取一个字符串，然后例程会自动检测单词并为每个单词添加动画，一次一个。

喜欢。

1. 动画第二秒显示:“Happy”

2. 动画第二秒显示:“Happy New”

3. 动画第二秒显示:“新年快乐”

4. 动画第二部分显示:“2011 年新年快乐”

每个单词都应该慢慢地“淡出/动画”，我认为一个简单的以像素为单位的滑动 Pane 会令人满意 - 但事实并非如此。逐字逐句。

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

对于单词列表，我只需拆分“”(空格)并接受“,.!”等是单词的一部分。

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

我在想也许项目符号列表也可能是一个技巧，然后让它像菜单一样水平 float ，然后将单词添加为新项目符号，每秒一次。但我很高兴看到这里的专家提出了解决方案。 :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>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);
});