Cómo animar un conjunto de objetos jQuery uno a la vez (en lugar de todos a la vez)

Question

Estoy intentando construir un control deslizante de imagen. (Sé que hay muchos plug-ins, pero esto es más con fines educativos).

Básicamente, tengo un conjunto de imágenes con z-index: 0. Lo que intento hacer es tomar el conjunto de imágenes, luego seleccionar cada una de las imágenes y cambiar el índice a 1, animar la opacidad, y luego vuelva a ponerlo en 0, para que la siguiente imagen haga lo mismo.

Esta es la primera parte, pero el problema que tengo es que cuando estoy probando esta parte, todas las imágenes hacen la animación al mismo tiempo. En lugar de hacer uno después del otro. Sé que puede utilizar las funciones de devolución de llamada tales como:

image1.animate(the animation, function({ 
     image2.animation(the animation, function({ 
       image3.animation(the animation, function}) etc... 

})

Pero si tuviera más imágenes que se hace más compleja. Estoy tratando de encontrar una forma más eficiente de hacerlo, pero no estoy encontrando la respuesta.

Esto es lo que he intentado:

images.each(function() { 
    $(this).css({ 
     "opacity" : "0.0", 
     "z-index" : "1" 
    }).animate({ 
     opacity: "1.0" 
    }, 3000); 
}); 

pero no funciona. Todas las imágenes hacen la animación al mismo tiempo. Incluso he intentado con un bucle "for", pero me da lo mismo:

for (var i=0; i<images.length; i++){ 
    images.eq(i).css({ 
     "opacity" : "0.0", 
     "z-index" : "1" 
    }).animate({ 
     opacity: "1.0" 
    }, 3000); 
} 

sé que estoy haciendo algo mal, pero no puedo entender lo que es. ¡Si alguien tiene ayuda, sería muy apreciado!

Answer 1

Utilice un .delay(), así:

images.each(function (i) { 
    $(this).delay(3000*i) 
      .css({ opacity : 0, "z-index": 1 }) 
      .animate({ opacity: 1 }, 3000); 
}); 

Dado que este utiliza el índice del elemento pasado como primer parámetro a la .each() devolución de llamada de la primera se retrasa 3000*0 ms, por lo que no en todos, los segundos retrasos por 3000ms, etc ... entonces animan uno después del otro.

Answer 2

Uso .queue() fijarlos http://api.jquery.com/queue/

Answer 3

Si no desea utilizar delay (que es lo que me gustaría hacer esto), usted podría hacer algo como esto, usando una función recursiva.

function animateImage(images, i) { 
  $(this).css({ 
   "opacity" : '0.0', 
   "z-index" : "1" 
  }).animate({ 
     opacity: "1.0" 
    }, 3000, function() { 
     var next = i + 1; 
    
     if (next < images.length) { 
      animateImage(images, next); 
     } 
    }); 
} 

animateImage(images, 0);