1

我想为文本设置动画，使其逐个字符淡入淡出。实际上，我设法在不保持 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 并用 a 包裹每个字符，<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>
4

1 回答 1

2

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

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

于 2013-02-03T14:42:50.943 回答