2010-07-19 15 views
6

Mam stronę internetową z animacjami (JQuery Animation) w każdym miejscu. Typowa sekwencja animacji może zawierać trzy lub cztery obiekty animujące się niezależnie w tym samym czasie. Problem, który napotykam, polega na tym, że kolejkowanie animacji nie jest przewidywalne. Niektóre z animacji działają jednocześnie, a inne nie.Jak wymusić animacje jQuery jednocześnie?

robie coś

setTimeout(function(){ 
     //animations 
    }, delay); 

w wielu miejscach po prostu spróbować i grupa animacje. Nawet podczas korzystania z tego niektóre animacje wewnątrz bloku kodu nie są uruchomione jednocześnie.

Czy istnieje sposób na to, aby animacje były uruchamiane w tym samym czasie? Czy istnieje sposób na wypełnienie kolejki animacjami, a następnie wykonanie ich w tym samym czasie? Czy istnieje obszerna dokumentacja dotycząca działania tej funkcji?

EDIT: Sample code Uwaga: kod jest niechlujny

Pytanie patrząc na kod skąd wiesz, który z animacjami zamierzamy uruchomić jednocześnie?

+6

Pokaż nam kod. – SLaks

+0

http://pastebin.com/Qns9xcuP Ostrzeżenie: Kod jest brudny. – Niyaz

Odpowiedz

8

Ten prowadzony jednocześnie (ale nie jeśli jest już w toku animacja na obiekcie):

$('.blabla .2').animate({opacity: 0.3, fontSize: 20}, 800); 

A jeśli chcesz być w 100% pewien, że to animowane razu (zauważ kolejkę: false):

$('.blabla .1').animate({fontSize: 20},{queue:false,duration:800}); 

Możesz to również zrobić. (Nadal będzie działać jednocześnie)

$('.blabla .1') 
    .animate({fontSize: 20},{queue:false,duration:800}) 
    .animate({opacity: 0.4},{queue:false,duration:800}); 

To działa jeden po drugim.

$('.blabla .1').animate({opacity: 0.3}, 800).animate({fontSize: 20}, 800); 

Więc robi to

$('.blabla .2').animate({opacity: 0.3}, 800, function() { 
    $('.blabla .3').animate({opacity: 0.3}, 800); 
}); 

Mam nadzieję, że odpowiedzi na swoje pytanie.

Przepraszamy za wszystkie zmiany, jestem nowy tutaj.

+0

Możesz także użyć .dequeu() po ustawieniu animacji, aby natychmiast ją uruchomić – Debianita

-1

Użyj opcji step. Dajesz mu funkcję, a po każdym kroku bieżącej animacji wykona tę funkcję. W ten sposób możesz się ożywić. Link to docs.

Powiązane problemy