2011-01-01 12 views
8

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!

Odpowiedz

11

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.

+0

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! –

-1

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

+1

'.queue' jest * na element *, więc trzeba by umieścić je w kolejce na losowym elemencie DOM, aby działało ... trochę niechlujnie. –

+1

Komentarz targowy +1: osobiście wolałbym jednak skorzystać z tej metody. Próbowałem używać .delay w przeszłości i napotkałem problemy z systemami i przeglądarkami, które mają problemy z animacjami, ponieważ nie przetwarzają wystarczająco szybko elementów. Korzystanie z opóźnienia (podobnie jak przy użyciu setInterval) zależy od mocy obliczeniowej systemu po stronie klienta i silnika javascript przeglądarki. –

2

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); 
Powiązane problemy