Strona główna kursu

JavaScript - framework jQuery - animacje

DZIAŁANIE: Animacja nr.1


Animacja nr.2

TEKST

Kod:

Kurs jQuery, kurs Ajax, kurs JavaScript

Ewentualne Objaśnienia:

Tutaj pokazałem przykładowe efekty, które uzyskujemy dzięki zastosowaniu animate w jQuery. Oczywiście idea sprowadza się do zmiany pewnych CSSowych własności danych elementów w zadanym czasie. I tak dla naszej pierwszej animacji mamy zmianę opacity (przeźroczystość) oraz położenia poziomego czyli własność left - oczywiście jak widzicie to wszystko podajemy w metodzie aimate, gdzie widać że na końcu określamy czas w jakim ma się wykonać ta zmiana, czyli nasza animacja (jak widzisz można używać slow, normal i fast). W analogiczny sposób dalej zmieniają się kolejne własności, a na samym końcu mamy metody slideUp oraz slideDown, które odpowiadają za zwinięcie i rozwinięcie prostokąta.
Animacja drugiego prostokącika opiera się na tej samej zasadzie, tutaj akurat użyłem toggle aby rozróżniać parzyste i nieparzyste kliknięcia i zależnie od tego zmieniać treść linku.

Bardzo wiele podobnych efektów i fajnych tutoriale znajdziecie pod adresem http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/ .