jQuery text fade/transition from one text to another?

Solution 1:

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.

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

Solution 3:

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.

Solution 4:

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/

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