CODEWITHSUNDEEP
jquery
Jake Wilson
Jake Wilson

Reputation: 91233

jQuery text fade/transition from one text to another?

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?

Upvotes: 64

Views: 106467

Answers (6)

8Fervor
8Fervor

Reputation: 9

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.

Upvotes: 0

Bogdan
Bogdan

Reputation: 271

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.

Upvotes: 27

Kiernan Burke
Kiernan Burke

Reputation: 21

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

Upvotes: 2

Moin Zaman
Moin Zaman

Reputation: 25465

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/

Upvotes: 4

Viktor St&#237;skala
Viktor St&#237;skala

Reputation: 1467

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

Upvotes: 45

Nick Craver
Nick Craver

Reputation: 630627

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.

Upvotes: 126

Related Questions