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

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

喜欢.

>秒进入动画节目：“快乐”
>秒进入动画节目：“Happy New”
>秒进入动画节目：“新年快乐”
>秒进入动画节目：“新年快乐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标签有效,但文本的某些部分在组中淡出.

试试这个：
“这是一个测试文本.[强]我们相信这比以往更好[/更强].”并看到问题.

解决方法

工作示例： 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 New Year 2011”
>创建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);
});

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

解决方法

猜你在找的jQuery相关文章