Blog

Aparición consecutiva con jQuery

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.

Fuente: Sequential Fade In – JQuery Plug-in

En Vivenet: Menú efecto acordeón con jQuery

No hay comentarios todavía.