jQuery Animación, Encadenamiento, .each() y .animate() (o fadeIn() y fadeOut())

Question

Tengo un problema tratando de resolver esto hoy, quiero hacer 5 elementos en el interior mi DOM (que aparece en la lista bajo el mismo elemento de atributo, $ ('. elements')) se desvanece y entra, y después de leer un poco en la API pensé que sería una idea fabulosa para implementar un fade en cada uno de ellos() y desvanecerse en la galería de exhibiciones.

Sin embargo, actualmente estoy usando:

$('.elements').each(function() { 
    $(this).fadeIn(2000).delay(200).fadeOut(2000).show(); 
}) 

pero todo se desvaneció dentro y fuera al mismo tiempo.

¿Cómo puedo hacer un efecto secuencial donde todo está encadenado y comienza desde el primer elemento de la lista (aka - $ ('elementos'). Eq (0)?) Hasta el último, y luego reinicia de nuevo?

¿De verdad necesito un bucle while para hacer esto en javascript/jquery? Esperaba que hubiera una función similar que pudiera encadenar para jQuery para reducir la carga y el tamaño del archivo.

Además, ¿hay alguna manera de evitar que las imágenes se desborden de mi div?

Answer 1

(function loop() { 
    $('.elements').each(function() { 
    var $self = $(this); 
    $self.parent().queue(function (n) { 
     $self.fadeIn(2000).delay(200).fadeOut(2000, n); 
    }); 
    }).parent().promise().done(loop); 
}()); 

demo: http://jsfiddle.net/uWGVN/2/

actualizado para tenerlo en bucle sin fin.

---

segunda actualización: una manera diferente, probablemente más fácil de leer, el enfoque:

(function fade(idx) { 
    var $elements = $('.elements'); 
    $elements.eq(idx).fadeIn(2000).delay(200).fadeOut(2000, function() { 
    fade(idx + 1 < $elements.length ? idx + 1 : 0); 
    }); 
}(0)); 

demo: http://jsfiddle.net/uWGVN/3/

Answer 2

Puede añadir una devolución de llamada

documento oficial:

('#clickme').click(function() { 
    $('#book').fadeOut('slow', function() { 
    // Animation complete. 
    }); 
}); 

y llamar a la misma función con i ++ et $ (' elementos.) Eq (i)

http://jsfiddle.net/dFnNL/

.

Answer 3

Para su desbordante, estilo con CSS:

div.(class) { position:relative; overflow:hidden; }