Jak tworzyć niestandardowe animacje w JQuery

Animacje dodają różne efekty upiększające, aby zaangażować widzów. JQuery obsługuje długą listę metod wykonywania różnych operacji. Metoda jQuery Animate () służy do tworzenia niestandardowych animacji w JQuery. Właściwości CSS są głównym interesariuszem metody JQuery Animate (). Właściwości te można animować przy różnych prędkościach o różnych wartościach. Ten post ma na celu dostarczenie szczegółowych wytycznych dotyczących animacji w JQuery z następującymi wynikami uczenia się

• Mechanizm pracy metody Animate ()
• Tworzenie niestandardowych animacji (przy użyciu przykładów)

Jak Animate () Metoda działa w jQuery

Metoda Animate () używana do tworzenia animacji ma następującą składnię.

Podana powyżej składnia ma następujące instancje

• selektor może być dowolna nazwa elementu, klasa lub identyfikator elementu
• CSS Część metody Animate () jest obowiązkowa dla animacji, a właściwość CSS, którą chcesz ożywić CSS część składni
• prędkość definiuje czas trwania animacji i można ją ustawić na „szybki”, „powolny” lub w milisekundach (wartość liczbowa)
• Wreszcie oddzwonić jest opcjonalnym parametrem i służy do pokazania pewnego przetwarzania po wykonaniu animacji

Animate () Składnia przetwarza wartość liczbową do zmiany CSS. Na przykład właściwość tła Color nie może być ustawiona za pomocą nazwy koloru, dlatego właściwość CSS Kolor nie jest zawarta w animacjach jQuery. Ponadto nazwy właściwości muszą znajdować się w przypadku wielbłądów, takich jak Bordercolor, BorderWidth i tak dalej.

Jak tworzyć niestandardowe animacje w JQuery

Jak omówiono wcześniej, metoda Animate () jest praktykowana w celu tworzenia animacji jQuery. Metodę Animate można zastosować w następujących scenariuszach

Wiele animacji jednocześnie: Wszystkie określone animacje są wykonywane w jednym Go.

Animowanie właściwości CSS jeden po drugim: W takim przypadku metoda Animate () jest stosowana w sposób sekwencyjny (jeden po drugim).

Animacja wartości względnej: Zwykle właściwości CSS są animowane przy użyciu bieżącej wartości właściwości CSS. Jednak metoda Animate () umożliwia wykonywanie dynamicznych animacji przy użyciu zjawiska wartości względnej.

Ćwiczylibyśmy możliwe sposoby w nadchodzących przykładach.

Przykład 1: Wiele animacji jednocześnie

Prawie wszystkie właściwości CSS można animować za pomocą metody Animate (). Ten przykład ilustruje efekt animacji jQuery () przy użyciu wielu właściwości CSS.

W powyższym kodzie,

• Różne właściwości CSS (szerokość, wysokość i rozmiar czcionki) elementu DIV będą animowane
• prędkość jest ustawiona na powolność

Wyjście

Przed animacją

Po animacji

Przykład 2: jeden po drugim

Efekt animacji można upiększyć, animując właściwości CSS jeden po drugim. Rzućmy okiem na tę metodę.

Powyższy kod ćwiczy animację na div element i jest wyjaśniony poniżej

• Wyściółka, wysokość, szerokość i szerokość graniczna z różnymi wartościami prędkości
• Po pierwsze, wyściółka zostanie animowana według wysokości, szerokości i szerokości granicznej

Wyjście

Przed animowaniem

Po animacji

Przykład 3: Wartości względne

Wartości względne są generowane przy użyciu dwóch operatorów przypisania „+=” i „-=”. Bieżąca wartość właściwości CSS jest przyjmowana jako wartości odniesienia, a nowe wartości są generowane przez dodanie/odejmowanie pewnej wartości liczbowej od tej bieżącej wartości.

W powyższym kodzie,

• szerokość i wysokość div będą animowane
• Po każdym kliknięciu (w naszym przypadku) szerokość wzrośnie 10px podczas gdy wysokość zostanie zmniejszona 5px.

Wyjście

Przed animacją,

Po wielu kliknięciach,

Przykład 4: Za pomocą wartości ciągów

Metoda Animate () akceptuje tylko trzy wartości (ukryj, pokaż lub przełącz) dla właściwości CSS. Właściwość przełączania może animować ukrytą nieruchomość do pokazania i odwrotnie.

W powyższym kodzie Pokaż i przełącz Operacje są wykonywane Szerokość i wysokość odpowiednio. W tym celu użyliśmy Button Class = ”przełącznik”I klasa =”pokazywać" .

Wyjście

Przed animacją,

Po kliknięciu przycisku przełączania szerokość zmieni swój stan (na ukryty, tak jak w „pokazywać„Stan), jak widać na następującym obrazie.

Jeśli klikniesz przycisk show, wyświetliby to ponownie div.

Animacje odgrywają kluczową rolę w przestrzeganiu dowolnej treści. Postępując zgodnie z tymi przykładami, nauczyłbyś się niestandardowego tworzenia animacji w Jquerry.

Wniosek

Metoda Animate () służy do tworzenia niestandardowych animacji w JQuery. Metodę Animate () można zastosować do Animyme wiele właściwości CSS jednocześnie lub można ją zastosować w sposób sekwencyjny. W tym artykule zawiera szczegółowy przewodnik na temat tworzenia niestandardowych animacji w JQuery. Zrozumienie metody Animate () (główny interesariuszy animacji). Ponadto wykazano kilka przykładów, które pokazują tworzenie niestandardowych animacji w JQuery.