jQuery文本效果,单词逐个出现

Question

我被问到是否可以使用jQuery在HTML中提出文本效果,我得到一个字符串,然后例程自动检测单词并为每个单词设置动画,一次一个.

喜欢.

1. 秒进入动画节目:"快乐"

2. 进入动画节目:"快乐新"

3. 进入动画节目:"新年快乐"

4. 进入动画节目:"新年快乐2011"

每个单词应该慢慢"淡化/动画",我认为一个简单的滑动窗格以像素为单位将是令人满意的 - 但不是.逐词地.

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

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

但是我如何在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标签有效,但文本的某些部分在组中淡出.

试试这个:"这是一个测试文本.[强]我们相信这比以前更好[/更强]." 并看到问题.

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()每一个通过1000毫秒乘以迭代的当前索引.

编辑:这是对使用较短延迟和较长动画的示例的更新,因此动画重叠一点.

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