8 
    <p class="example">i want to split this paragraph into 
words and fade them in one by one</p>

jquery/js:

$(document).ready(function() {

    var $txt = $(".example")
       ,$words = $txt.text()
       ,$splitWords = $words.split(" ");

    $txt.hide();

    for(i = 0; i < $splitWords.length; i++){
     // i want fade in each $splitWords[i]
     //$splitWords[i].fadeIn(....  - i tried this doesnt work

   }
  });

段落を単語に分割し、1 つずつフェードインしようとしていますが、単語を分割せずにこれを行う方が簡単な方法かもしれません。これに光を当ててください。ありがとう

4

3 に答える 3

15

テキスト自体に不透明度を設定することはできないため、不透明度を設定できる要素 (スパンなど) でテキストをラップする必要があります。その後、それらのスパンをフェードインできます。

これを試して：

http://jsfiddle.net/6czap/

var $el = $(".example:first"), text = $el.text(),
    words = text.split(" "), html = "";

for (var i = 0; i < words.length; i++) {
    html += "<span>" + words[i] + " </span>";
}

$el.html(html).children().hide().each(function(i){
  $(this).delay(i*500).fadeIn(700);
});

benekastah の更新: http://jsfiddle.net/6czap/3/

var $el = $(".example:first"), text = $.trim($el.text()),
    words = text.split(" "), html = "";

for (var i = 0; i < words.length; i++) {
    html += "<span>" + words[i] + ((i+1) === words.length ? "" : " ") + "</span>";
};
$el.html(html).children().hide().each(function(i){
  $(this).delay(i*200).fadeIn(700);
});
$el.find("span").promise().done(function(){
    $el.text(function(i, text){
       return $.trim(text);
    });            
});
于 2012-07-24T19:10:39.490 に答える
3

要素をフェードインする必要があります。テキスト ノードには不透明度を設定できません。

jsfiddle.net でデモを参照してください

var p = $("p.example").hide(); // possible flash! You should add some script
                               // to the <head> that writes a stylesheet
                               // to hide them right from the start
(function oneParagraph(i) {
    if (p.length <= i)
        return;
    var cur = p.eq(i),
        words = cur.text().split(/\s/),
        span = $("<span>"),
        before = document.createTextNode("");
    cur.empty().show().append(before, span);
    (function oneWord(j) {
        if (j < words.length) {
            span.hide().text(words[j]).fadeIn(200, function() {
                span.empty();
                before.data += words[j]+" ";
                oneWord(j+1);
            });
        } else {
            span.remove();
            before.data = words.join(" ");
            setTimeout(function(){
                oneParagraph(i+1);
            }, 500);
        }
    })(0);
})(0);

パラグラフが 1 つだけ必要な場合は、oneParagraph関数に属するすべてのものを省略できcurます。選択した要素を作成するだけです。

よりスムーズなアニメーションが必要な場合は、複数の単語を同時にアニメーション化するか ( demo )、フェードせずにここのように文字ごとに追加する必要があります。または、現在の単語の長さに依存するフェージング時間を作成することもできます。

于 2012-07-24T19:29:44.600 に答える
0

これまでに述べた提案には、いくつかの問題があります。

まず、Javascript でテキストを分割して非表示にすると、スタイルのないコンテンツのフラッシュが発生します。第 2 に、長いテキストの場合、リフローの回数がかなり悪くなります。

テキストを非表示にするのではなく、前景と背景を同じ色に設定してから元に戻すことを検討してください。

于 2012-07-24T20:10:52.677 に答える