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

Posted 2023-05-08

【中文标题】单词一个一个出现的jQuery文本效果

【英文标题】：jQuery text effect where words appear one by one

【发布时间】：2011-06-04 04:53:54

【问题描述】：

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

喜欢。

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

进入动画显示：“Happy New”

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

秒入动画节目：《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]。”看看问题。

【参考方案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);
);

【讨论】：

也很好！现在我必须决定谁应该得到“答案”..希望我能标记多个......

我将如何初始化 str 变量，让我们说一个带有名为 eg 的 css 类的 span/div。 "ticker": 2011 年新年快乐

@BerggreenDK：刚刚注意到你的 cmets。我再看看。 （顺便说一句，使用split(/\s+/)，您正在传递一个正则表达式，上面写着“在找到一个或多个相邻空格字符的地方分割”。

@BerggreenDK: Here's an updated example. 它只适用于嵌套一层深的标签。我会把它添加到我的答案中。

@BerggreenDK：它用于区分文本节点和元素，因为您需要一些不同的技术来操作它们的内容。 Here's a list 的不同节点类型。类型 1 和 3 最有可能是您需要参考的。 .contents() 方法与.children() 类似，只是它也检索文本节点。因此，当我们使用.each() 进行迭代时，我们会测试每一个以查看我们当前拥有的。

【参考方案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();
  ;

【讨论】：

谢谢，这就是我的目标。

【参考方案3】：

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

刚刚发布！

【讨论】：

哦。比我的答案要好得多。使用 Emacs 而不是 Google 是我的错。

这是一个很棒的页面，里面也有很多有趣的示例。但我认为正确的答案必须是这次最准确的答案。不过感谢您的链接。很酷的东西！

@Malvolio：我认为你做了一个很好的尝试，很抱歉我不能标记一个以上的好答案，但我也投了你的票。

链接失效