Próbuję utworzyć suwak obrazu. (Wiem, że jest tam mnóstwo wtyczek, ale jest to bardziej do celów edukacyjnych).Jak animować zestaw obiektów jQuery pojedynczo (zamiast wszystkich naraz)
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!
Wielkie dzięki. Z jakiegoś powodu nie powiadomiono mnie o odpowiedzi na to stanowisko i zakładałem, że nikt nie odpowiedział. W każdym razie dzięki! –