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

   }
  });

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

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

如果您只需要一个段落，您可以省略所有属于该oneParagraph功能的内容 - 只需制作cur选定的元素。

如果你想要一个更流畅的动画，你需要同时为多个单词制作动画（演示），或者不要褪色而是像这里一样按字母顺序附加。或者，您可以使褪色时间取决于当前单词的长度。

于 2012-07-24T19:29:44.600 回答
0

到目前为止提到的建议会有一些问题。

首先，在 Javascript 中拆分然后隐藏文本将导致 Flash 的无样式内容。其次，对于长文本，重排的数量会非常糟糕。

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

于 2012-07-24T20:10:52.677 回答