Jak animować zestaw obiektów jQuery pojedynczo (zamiast wszystkich naraz)

Question

Próbuję utworzyć suwak obrazu. (Wiem, że jest tam mnóstwo wtyczek, ale jest to bardziej do celów edukacyjnych).

Zasadniczo mam zestaw obrazów z indeksem Z: 0. Próbuję wykonać zestaw obrazów, następnie wybrać każdy z obrazów i zmienić indeks na 1, animować przezroczystość, a następnie umieść go z powrotem na 0, aby następny obraz zrobił to samo.

To jest pierwsza część, ale problem polega na tym, że kiedy testuję tę część, wszystkie obrazy wykonują animację w tym samym czasie. Zamiast robić jeden po drugim. wiem, że można użyć funkcji zwrotnych, takich jak:

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

})

Ale gdybym miał więcej obrazów stałby się bardziej skomplikowana. Próbuję znaleźć bardziej skuteczny sposób robienia tego, ale nie znajduję odpowiedzi.

To co próbowałem:

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

ale to nie działa. Wszystkie obrazy wykonują animację w tym samym czasie. Próbowałem nawet z pętli „for”, ale pojawia się to samo:

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

wiem, że robi coś złego, ale nie mogę dowiedzieć się, co to jest. Jeśli ktokolwiek ma jakąkolwiek pomoc, byłby bardzo doceniony!

Answer 1

Użyj .delay(), tak:

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

Ponieważ wykorzystuje indeks elementu przekazanego jako pierwszy parametr do .each() zwrotnego pierwszy jest opóźniony 3000*0 ms, więc wcale, drugie opóźnienia na 3000 ms, itd. ... więc animują jeden po drugim.

Answer 2

Zastosowanie .queue() ustawić je http://api.jquery.com/queue/

Answer 3

Jeśli nie chcesz używać delay (co jest jak bym to zrobić), można zrobić coś takiego, za pomocą funkcji rekurencyjnej.

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);