jQuery text fade/transition from one text to another?

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

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 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

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.

Answer 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/

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

Text FadeIn/FadeOut-esque slide show for cycling through multiple text strings without having to create multiple html elements (e.g lists of li's or div's) using jQuery FadeIn/FadeOut.

The current answer works. And thanks for it. Very helpful. This just extends it a bit, adding the ability to fadeIn/Out more than two (multiple) strings, sequentially, within the the same function. My use case was that I was working with a rigid CMS and I needed to be able to, first, make an h2 element appear on screen, and, then, sequentially fadeIn and fadeOut multiple text/strings. The last string stays on screen forever. There may be other, better ways to do it, but here's one.

First renders an h2 element to appear onscreen after a delay of 7.5 seconds (7500ms). Then, cycles through multiple strings of text within the h2 through a nested fadeIn/fadeOut function that utilizes only one html element instead of multiple like in most samples I've seen. It's like a slide show. As mentioned, most scripts I see require you to have a list of multiple html elements, e.g. a list of li's or div's. This just one.

Let's say you have an h2 element with original text "Original Text." Now you want to fadeIn/Out "Secondary Text." Then, after that, fade in "Tertiary Text."

HTML

<h2>Original Text</h2>

JQUERY

$(document).ready(function(){
    var my_h2 = $("h2");
      my_h2.delay(7500).fadeIn(1000, 
        function a() {
          $(this).text('Secondary Text.').delay(7500).fadeIn(3000, 
            function b() {
              $(this).text('Tertiary Text.').delay(7500).fadeIn(3000);
          });
      });
});

You can play around with the values of the different delay()'s, text()'s, and fadeIn/Out()'s to get different timing of when the text displays and how fast or slow it fades in or out, etc.

The "Original Text" will appear as you typed it on your HTML/php page/file. The "Secondary Text," "Tertiary Text," and any subsequent strings in the function are controlled by where you see .text('the text'). Just replace what I have there to show your own text.

The $(this) is simply a shorthand way to reuse the original object, in this case the h2 element we're working with.

I named the functions a and b just for example but you can omit or change as you please.

It's as easy as that. Now if you want to add 4th, 5th, nth-level strings, you can just keep repeating the process by creating new children functions of the new child's parent function.

Let me know if you have any other creative ways to use the original answer or improve it.

Thanks.