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);
});

しかし、これは私のテキスト内の可能な要素、特に強力な要素だけでなく、リストや表も破壊します。そこで、次の 2 つの解決策を考えました。

  • 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>
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 に答える