fading elements inside a div with cycle

Answer 1

Check this plugin out:

• http://www.malsup.com/jquery/cycle/int2.html

One of the demos on that page should give you what you want.

From the site:

Slideshows are not limited to images. You can use any element you want.

Answer 2

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

Answer 3

Do something like below code,

var delay = 1000;
$(document).ready(function() {
  $('#fade p').fadeOut(0).each(function(i) {
      $(this).delay(i * delay).fadeIn(1000);
    }); 
});

Demo : http://jsbin.com/oqidi3