Fundido en cada elemento – uno tras otro

Estoy tratando de encontrar una manera de cargar una página JSON para mostrar mi contenido, que actualmente tengo. ¿Pero estoy tratando de desvanecerme en cada elemento uno tras otro? ¿Alguien está familiarizado con una forma de hacer eso?

Fundido en cada elemento con un ligero retraso?

Aquí hay un ejemplo de mi código, estoy usando el framework jquery.

CÓDIGO: http://pastie.org/343896

Bueno, podrías configurar tus funciones de fundido para activar el “siguiente”.

$("div#foo").fadeIn("fast",function(){ $("div#bar").fadeIn("fast", function(){ // etc. }); }); 

Pero un temporizador puede ser un sistema mejor, o una función que los consiga a todos, los pone en una matriz, y luego los abre de uno en uno con un retraso intermedio, desvaneciéndolos de uno en uno.

Supongamos que tiene una matriz de elementos span:

 $("span").each(function(index) { $(this).delay(400*index).fadeIn(300); }); 

(nota rápida: creo que necesitas jQuery 1.4 o superior para usar el método .delay)

Esto básicamente esperaría una cantidad de tiempo determinada y fundiría cada elemento. Esto funciona porque está multiplicando el tiempo de espera por el índice del elemento. Los retrasos se verían más o menos así al iterar a través de la matriz:

  • Delay 400 * 0 (sin demora, solo fadeIn, que es lo que queremos para el primer elemento)
  • Demora 400 * 1
  • Retardo 400 * 2
  • Demora 400 * 3

Esto hace un efecto fadeIn agradable “uno después del otro”. También podría usarse con slideDown. ¡Espero que esto ayude!

¿Qué tal esto?

 jQuery.fn.fadeDelay = function() { delay = 0; return this.each(function() { $(this).delay(delay).fadeIn(350); delay += 50; }); }; 

Creo que necesitarás algo como esto:

 var elementArray = yourAjaxRequestReturningSomethingEdibleByJQuery(); fadeInNextElement(elementArray); function fadeInNextElement(elementArray) { if (elementArray.length > 0) { var element = elementArray.pop(); $(element).fadeIn('normal', function() { fadeInNextElement(elementArray); } } } 

Precaución: no lo he probado, pero incluso si no funciona, debe hacerse una idea y solucionarlo fácilmente.

Por cierto, no estoy de acuerdo con el uso de un temporizador. Con un temporizador, no hay nada que garantice que los elementos se desvanezcan uno después del otro, y el desvanecimiento de un elemento solo comenzará si el anterior ha terminado.

Teóricamente, debería funcionar, pero podría haber casos en los que su “cadena” deba detenerse por algún motivo, o la animación de desvanecimiento no pueda finalizar a tiempo, etc. Simplemente use un encadenamiento adecuado.

Verifique jQuery fadeIn () con un setTimeout () (función JS estándar). Puede verificar algo que hice en este sitio http://www.realstorage.ca/ . Básicamente los escondo y los muestro para que puedan ir en un bucle.