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

i want to split this paragraph into words and fade them in one by one 

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 += "" + words[i] + " "; } $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 += "" + words[i] + ((i+1) === words.length ? "" : " ") + ""; }; $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

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

请参阅jsfiddle.net上的演示

 var p = $("p.example").hide(); // possible flash! You should add some script // to the  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 = $(""), 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 。

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

Answer 3

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

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

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