Fading from one SPAN to another, ending on last, jQuery

Question

Greetings,

I am trying to fade in text spans one after another, fading each out before the next is faded in, using jQuery.

<p>IN
<span class="fadeText">spiring</span>
<span class="fadeText">nnovative</span>
<span class="fadeText">genious</span>
</p>

The spans will be set to hidden in CSS, trying fade from one span to the next and ending with the last still visible. I've tried several combinations using $(".fadeText").each and fadeIn() , fadeOut() but cannot seem to produce this effect.

Any help would be greatly appreciated

Thanks

Answer 1

Live demo: http://jsfiddle.net/xHnzP/1/

var spans = $('span.fadeText');

function loop(span) {
    span.fadeIn(1000).delay(1000).fadeOut(1000, function() { 
        loop( span.next().length ? span.next() : spans.first() );
    });
}

loop( spans.first() );

---

Btw, the above code fades the span elements in an infinite loop. If you just want to go trough all of them once, then the code is even simpler:

Live demo: http://jsfiddle.net/xHnzP/2/

var spans = $('span.fadeText');

function loop(span) {
    span.fadeIn(1000).delay(1000).fadeOut(1000, function() { 
        span.next().length && loop( span.next() );
    });
}

loop( spans.first() );

---

UPDATE

I didn't notice that you wanted the last SPAN to stay visible. Here is the updated code:

Live demo: http://jsfiddle.net/xHnzP/5/

var spans = $('span.fadeText');

function loop(span) {
    span.fadeIn(1000, function() {
        span.next().length && span.delay(1000).fadeOut(1000, function() {
            loop( span.next() );
        }); 
    });
}

loop( spans.first() );

You can see that unlike the frist two versions (above), this third version requires two nested callbacks (after the fade in, to check if it's the last SPAN, and after fade out, to call the next cycle of the function).

Also, in case you have trouble figuring this out, span.next().length is a check that returns true/false (acutally 1/0) based on whether or not there is at least one more SPAN after the current one.

Answer 2

View a demo of the following here.

This can be accomplished by creating function that takes an index as an argument, does the fading animation on that index for the .fadeText elements, increments the index and calls itself if there are still elements left. Like so:

var fadeNext = function ( i ) {

    var $ft = $('.fadeText'),
        timeVal = 1000;

    $ft.eq( i ).fadeIn(timeVal, function(){

        i++;

        if (i < $ft.length) {
            $(this).delay(timeVal).fadeOut(timeVal, function(){
                fadeNext( i );
            });
        }

    });
}

fadeNext( 0 );

EDIT: updated to meet requirement of stopping on last span, and remove incorrect recursion references.

Answer 3

Here's another approach that works with your HTML as is, using a custom trigger to achieve the effect of recursion:

$('span.fadeText').bind('fader', function(e) {
    $(this).fadeIn(500, function() {
        if ($(this).next('span').length) { // if not the last one
            $(this).fadeOut(1000, function() { // fade out
                $(this).next().trigger('fader'); // and move to the next
            });
        } else {
            return false;
        }
    });
}).first().trigger('fader'); // tip the first domino

Example: http://jsfiddle.net/redler/Ru4cv/

Answer 4

Try this, but with an extra class on your spans:

  $('.fadeText .one').fadeIn(1000,function() {
       $('.fadeText .two').fadeIn(1000,function() {
           $('.fadeText .three').fadeIn(1000);
        });
   });


  <span class="fadeText one">spiring</span>
  <span class="fadeText two">nnovative</span>
  <span class="fadeText three">genious</span>

You can adjust the 1000 duration to increase or decrease the durations.