Javascript 逐字符淡入（保持DOM完整）

我想设置一个文本的动画，使其在一个字符一个字符中淡出。实际上，我在不保持DOM完整的情况下做到了这一点，它看起来如下：

// make each character an own span element
// abc will become <span>a</span><span>b</span><span>c</span>
var elements = $(elemId).text().split('');
$(elemId).text('');

for (var i = 0; i < elements.length; i++) {
    $(elemId).append('<span>' + elements[i] + '</span>');
}

// fade in all spans one by one
$(elemId + " span").each(function(index) {
    $(this).delay(speed * index).fadeIn(300);
});

那么，我要做什么才能正确地获取文本和标记呢？如果一切都像上面那样设置，我想这只是递归地使用

contents（）

并再次设置所有元素的可见性的问题。但是正确地添加我的

似乎很困难

一些例子

我是AB

应成为：

<span display="none">I</span><span display="none"> </span>
<span ...>a</span><span ...>m</span><span ...> </span>
<strong ...><span ...>A</span><span ...>B</span></strong>

I
是
AB

.contents（）

不会遍历DOM。您需要应用

.find（“*”

来获取所有子体，然后对它们应用

.contents（）

$("selector").find("*").andSelf().contents().each(function(){
  if(this.nodeType == Node.TEXT_NODE){
    $(this).replaceWith($.map(this.data, function(c){
      return "<span>" + c + "</span>";
    }).join(""));
  }
});

$（“选择器”）.find（“*”）.andSelf（）.contents（）.each（函数（）{
if（this.nodeType==Node.TEXT\u Node）{
$（this）.replaceWith（$.map）（this.data，函数（c）{
返回“+c+”；
}).加入（“”）；
}
});

---

这是元素子体中每个字符所做的工作。我想你知道你需要非常小心地使用。

使用淡出的覆盖层怎么样？@mikakun:我想我无法准确地找到你的意思，但听起来好像不起作用，因为这样整个布局就必须预先渲染（如

可见性：hidden

），但是我希望我的文本框随着文本的增长而增长（

display:none

）。我的意思是在文本上覆盖有背景的元素（文本可见，但通过覆盖隐藏）；如何设置文本容器宽度的动画（使用渐变边框，模仿淡入淡出的效果，隐藏一些无换行和溢出）（如果有多行，则不可能）；您选择的路径对于这样一个小小的功能来说似乎有点难以承受。我们可以通过添加另一个

else if

：）来扩展它，以隐藏标记（例如，有序列表）

<span display="none">I</span><span display="none"> </span>
<span ...>a</span><span ...>m</span><span ...> </span>
<strong ...><span ...>A</span><span ...>B</span></strong>

$("selector").find("*").andSelf().contents().each(function(){
  if(this.nodeType == Node.TEXT_NODE){
    $(this).replaceWith($.map(this.data, function(c){
      return "<span>" + c + "</span>";
    }).join(""));
  }
});