jQuery text fade/transition from one text to anoth

Question

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

Example:

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

Can one change the text Hello to World but have it change with a transition (like a fade or some effect) instead of changing instantly?

Answer 1

one way I can think of to do this is to have child elements with text and show only one to begin with, then fade the other ones in one after another.

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

Answer 2

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

Like this:

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

Answer 3

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

Answer 4

You can use callbacks, like this:

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

You can give it a try here, or because of how the queue works in this particular case, like this:

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

This executes the .text() call when the .fadeOut() is complete, just before fading in again.

Answer 5

Using array lookups for text and color change, transition speed, and mouseenter, mouseleave events on this menu like this:

$('#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

Here is a live 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.