Fundido en cada elemento - uno tras otro

Question

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

Answer 1

Bueno, podría configurar sus funciones de fundido para activar el "siguiente".

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

Sin embargo, un temporizador puede ser un sistema mejor, o una función que todos ellos se pone, los pone en una matriz, entonces ellos se dispara uno a la vez con un retraso en el medio, la decoloración en una en una hora.

Answer 2

Salida jQuery fadeIn() con un setTimeout) (JS función 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.

Answer 3

creo que se necesita 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: Yo no lo he probado, pero incluso si no funciona, usted debe conseguir la idea y fijarla 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 el encadenamiento adecuado.

Answer 4

Digamos que usted tiene una serie de elementos span:

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

(nota rápida: Creo que es necesario jQuery 1.4 o superior para utilizar el método .delay)

Esto básicamente esperar una cantidad de tiempo determinada y desvanecimiento de cada elemento. Esto funciona porque está multiplicando el tiempo de espera por el índice del elemento. Los retrasos se vería algo como esto cuando se repite a través de la matriz:

• retardo 400 * 0 (sin retardo, simplemente fadeIn, que es lo que queremos para el primer elemento)
• retardo 400 * 1
• retardo 400 * 2
• retardo 400 * 3

Esto hace que un buen "uno tras otro" efecto fadeIn. También podría usarse con slideDown. ¡Espero que esto ayude!

Answer 5

¿Qué tal esto?

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