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

jquery / js: ...">
Geek Answers Handbook

Word paragraph fading with jquery?

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

im trying to split the paragraph into words and gradually fade, maybe this will be an easier way to do this without breaking the words, please shed some light on this. thanks

+7
source share
3 answers

The text itself cannot have opacity, so you must wrap the text with an element that can have opacity (for example, a range). Then you can fade in these gaps.

Try the following:

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

Update for 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); }); });
+13
source

You will need to fade in the elements, text nodes cannot have opacity.

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

If you need only one paragraph, you can get around all the things related to the oneParagraph function - just make cur selected item.

If you want to have a smoother animation, you need to animate several words at the same time ( demo ), or dont fade out, but add the letter designation here . Alternatively, you can make the fade time dependent on the length of the current word.

+3
source

You will have problems with the offers mentioned so far.

Firstly, splitting and then hiding the text in Javascript will lead to the creation of Flash content from intolerable. Secondly, the number of skews will be pretty bad for long text.

Instead of hiding the text, consider setting the foreground and background to the same color, and then change it.

0
source

More articles:


All Articles