javascript - 一个字符一个字符地淡入淡出(保持 DOM 完好无损)

Question

我想为文本设置动画，使其逐个字符淡入淡出。实际上，我设法在不保持 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);
});

但这会破坏我文本中的可能元素，尤其是强元素，但也会破坏列表或表格。所以我想到了这两种可能的解决方案:

• 使用 jQuery 遍历 DOM 并用 <span> 包裹每个字符, 但不要删除其他元素。然后我们仍然有问题，表格行将始终显示(只是空的)
• 使用 jQuery 遍历 DOM 并用 <span> 包裹每个字符并禁用彼此元素到 display: none .然后遍历它并显示出现的东西(span 和其他元素)。这可能会暂时破坏 HTML(<ul> 内部没有 <li> 等，但我想所有浏览器都能够很好地处理它)。

我从 contents() 开始方法，但我并没有真正上手。

这是我目前拥有的，但它根本没有替换任何东西(即使它至少找到了一些文本):

$(elemId).contents().each(function() {
    if (this.nodeType == 3) {
        var elements = $(this).text().split('');
        alert(elements);
        // does not delete anything, but it would also break 
        // if it deleted something
        // because text('') goes over elements like <strong> etc.
        $(this).text('');
        alert($(this).text());

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

那么我该怎么做才能正确获取我的文本和标签呢？如果一切都像上面那样设置，我想这只是使用 contents() 的问题递归并再次设置所有元素的可见性。但是添加我的 <span>正确地看起来很难。

一些例子

I am <strong>AB</strong>

应该变成:

<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>

Answer 1

.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(""));
  }
});

这是元素后代中每个字符完成的工作。我想您知道您需要格外小心地使用。