Question

    <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

   }
  });

我试图将段落分成单词，并逐一淡化它们，这可能是一种更简单的方法来做到这一点而不会分裂单词，请对此有所了解。感谢

Answer 1

文本本身不能具有不透明度，因此必须使用可以具有不透明度的元素（例如span）来包装文本。然后，您可以淡出这些跨度。

试试这个：

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

Answer 2

您需要淡入元素，文本节点不能具有不透明度。

请参阅demo at 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);

如果您只需要一个段落，则可以省略所有与oneParagraph函数相关的内容 - 只需将cur设为所选元素。

如果你想要一个更流畅的动画，你需要同时为多个单词设置动画（demo），或者不要淡化，但要像in here那样附加字母。或者，您可以使衰落时间取决于当前单词的长度。

Answer 3

到目前为止，您提到的建议存在一些问题。

首先，在Javascript中拆分然后隐藏文本将导致Flash的Unstyled Content。其次，长文本的回流次数会非常糟糕。

考虑将前景和背景设置为相同的颜色，然后将其更改回来，而不是隐藏文本。

使用jquery逐字逐句淡化一个段落？

3 个答案: