Efecto muy llamativo. Aplica la aparición consecutiva, es decir, hasta que la anterior no haya terminado de aparecer no comienza a aparecer la siguiente, a todas las etiquetas contenidas dentro de una etiqueta padre. Hemos modificado el código original, añadiendo un if en la línea 16 para que no añada el efecto a etiquetas sin contenido como son las clear, ya que hacerlas desaparecer y luego aparecer provoca fallos en la maquetación.
Código:
(function(jQuery) {
jQuery.fn.fadeInSequence = function(fadeInTime, timeBetween)
{
//Default Values
timeBetween = typeof(timeBetween) == 'undefined' ? 0 : timeBetween;
fadeInTime = typeof(fadeInTime) == 'undefined' ? 500 : fadeInTime;
//The amount of remaining time until the animation is complete.
//Initially set to the value of the entire animation duration.
var remainingTime = jQuery(this).size() * (fadeInTime+timeBetween);
var i=0; //Counter
return jQuery(this).each(function()
{
//Para que no haga cosas raras con los clear
if ( !jQuery(this).hasClass("clear") ){
//Wait until previous element has finished fading and timeBetween has elapsed
jQuery(this).delay(i++*(fadeInTime+timeBetween));
//Decrement remainingTime
remainingTime -= (fadeInTime+timeBetween);
if(jQuery(this).css('display') == 'none')
{
jQuery(this).fadeIn(fadeInTime);
}
else //If hidden by other means such as opacity: 0
{
jQuery(this).animate({'opacity' : 1}, fadeInTime);
}
//Delay until the animation is over to fill up the queue.
jQuery(this).delay(remainingTime+timeBetween);
}
else{
jQuery(this).show();
}
});
};
})(jQuery);
Llamada a la función:
$("wrapper p").fadeInSequence(); //Elementos dentro de wrapper p aparecerán sin pausa entre ellos durando 500ms su animación (valor por defecto).
$("wrapper p").fadeInSequence(1000); //Elementos dentro de wrapper p aparecerán sin pausa entre ellos durando 1000ms su animación.
$("wrapper p").fadeInSequence(300, 500); //Elementos dentro de wrapper p aparecerán con pausa de 500ms entre ellos durando 300ms su animación.


