Question

I’ve a div like this:

<div id="fade">
<p>  A </p>  
<p>  B </p>  
<p>  C </p>  
<p>  D </p>  
<p>  E </p>  
</div> 

I want to fade every letter in that div, and the cycle should only repeat once.

That is it should start from ‘A’ and go till ‘E’ and then stop.

Is there any jQuery lib for that?

Edit:
Thanks for all your responses. I think i framed the question wrong.
i want the div(fade) to show ‘A’ then fade-out and in the same place ‘B’ should fade-in and so on. This should repeat only once.

Thanks.

Answer 1

you can simply extend jQuery with this functionality:

$.fadeInNext = function(next){
    next.fadeIn(function(){
        $.fadeInNext($(this).next());
    });
}
$.fn.fadeInEach = function(){
    this.eq(0).fadeIn(function(){
        $.fadeInNext($(this).next());
    });
};
$('#fade p').hide().fadeInEach();​

This should work. Example

---

Update:

To fade the new letter in after the pervious one is faded:

$.fadeInNext = function(next) {
    next.fadeIn(function() {
        $(this).fadeOut(function(){
            $.fadeInNext($(this).next());
        });
    });
}
$.fn.fadeInEach = function() {
    this.eq(0).fadeIn(function() {
        $(this).fadeOut(function() {
            $.fadeInNext($(this).next());
        });
    });
};
$('#fade p').hide().fadeInEach();​

Example

---

To fade the new letter in while the previous is still fading out:

CSS:

#fade {
    position: relative;
}
#fade p {
    position: absolute;
}​

JavaScript:

$.fadeInNext = function(next) {
    next.fadeIn(function() {
        $(this).fadeOut();
        $.fadeInNext($(this).next());
    });
}
$.fn.fadeInEach = function() {
    this.eq(0).fadeIn(function() {
        $(this).fadeOut();
        $.fadeInNext($(this).next());
    });
};
$('#fade p').hide().fadeInEach();​

Example