JQuery text fade / transition from one text to another?

Question

jQuery can be easily fadeIn / fadeOut easily. But what if you want to change text from one thing to another? Could this happen with the transition?

Example:

<div id='container'>Hello</div> 

Is it possible to change the text of Hello to World, but change it with a transition (for example, fading or some kind of effect) instead of changing it instantly?

Answer 1

You can use callbacks, for example:

 $("#container").fadeOut(function() { $(this).text("World").fadeIn(); }); 

You can try it here or because of how the queue works in this particular case, for example this :

 $("#container").fadeOut(function() { $(this).text("World") }).fadeIn(); 

.fadeOut() .text() when .fadeOut() full before .fadeOut() again.

Answer 2

If you use hide / show or fadeIn / fadeOut, you may encounter some kind of "jumping" effect, because it changes the CSS display property. I would suggest using animation with opacity.

Like this:

 $('#container').animate({'opacity': 0}, 1000, function () { $(this).text('new text'); }).animate({'opacity': 1}, 1000); 

Answer 3

Here is a living example .

 (function() { var quotes = $(".quotes"); var quoteIndex = -1; function showNextQuote() { ++quoteIndex; quotes.eq(quoteIndex % quotes.length) .fadeIn(2000) .delay(2000) .fadeOut(2000, showNextQuote); } showNextQuote(); })(); 

It works well.

Answer 4

At one point, I might think that for this you need to have children with text and show only one to start, and then put out the others in one after another.

look here: http://jsfiddle.net/VU4CQ/

Answer 5

Using array search to change text and color, transition speed and mouse, mouseleave events on this menu for example:

 $('#id a').mouseenter(function() { $(this).fadeOut( eSpeed, function() { $(this).text(sayThis[0]); $(this).css({ color: eColor }); }).fadeIn(eSpeed); }); $('#id a').mouseleave(function() { $(this).fadeOut( eSpeed, function() { $(this).text(sayThat[0]); $(this).css({ color: lColor }); }).fadeIn(eSpeed); }); 

Answer 6

I suggest you use the main jQuery slider plugin . Very lightweight (6k) and does what you want, and has a couple of customization options without any mess of most slider plugins. I use it all the time, and it's great.