Efekty jQuery | Wyjaśnione
Konfigurowanie HTML i w tym JQuery
Aby zacząć korzystać z JQuery w swoim projekcie, musisz podać go do znacznika skryptu, używamy Google hosted jQuery z następującym wierszem:
Po dodaniu tego wiersza do pliku HTML możemy zacząć pisać kod jQuery
Metoda Animate ()
Metoda animacji oferowana przez JQuery jest używana do tworzenia bardzo podstawowej, ale ale atrakcyjnej animacji na Twojej stronie internetowej. Ta funkcja przyjmuje trzy argumenty:
- Wymagany parametr, który jest animacja
- A prędkość (opcjonalnie) parametr, który określa prędkość animacji
- A oddzwonić(Parametr opcjonalny), który jako nazwa wskazuje, jest funkcja wywołania zwrotnego
Składnia metody Animate ()
Składnia jest dość prosta, jak już wyjaśniono powyżej
[jquerry_selector $ ()].animate (parametr, animation_speed, callback_function);Aby to zademonstrować, utworzymy przycisk i div w naszym pliku HTML za pomocą następujących wierszy:
Cześć! Jestem LinuxBot
To da nam następujący wynik w Twojej przeglądarce:
W przypadku kodu jQuery zamierzamy przekazać krycie div do 0.7 Ale zrobimy to w 2 sekundy przy użyciu następujących wierszy kodu:
$ („przycisk”).kliknij (funkcja ()$ („div: last”).animować(
Krycie: "0.5 ",
,
2000
);
);
Jak zauważysz, owinęliśmy animować Metoda w Kliknij metoda zdarzenia, aby nasza animacja była wywoływana tylko po kliknięciu przycisku. Po naciśnięciu przycisku otrzymujemy następujący wynik:
Jak widać, byliśmy w stanie animować krycia za pomocą metody animatu.
Metoda show () i hide ()
Metody te są używane do wyświetlania i ukrywania elementów strony internetowej, składnia obu tych funkcji jest prawie identyczne jako:
[jquerry_selector $ ()].show (Animation_speed, Callback_Function);[jquerry_selector $ ()].ukryj (animation_speed, callback_function);
Aby to zademonstrować, wpisz następujące wiersze w naszym pliku HTML:
Mogę zniknąć i pojawić się ponownie
Zobaczysz następującą stronę internetową na swojej przeglądarce:
Jak widać, mamy div z pewnym tekstem w nim wraz z dwoma przyciskami, które z nich używają ukrywać I pokazywać odpowiednio animacje.
W części jQuery użyj następujących wierszy kodu w pliku JavaScript:
$ („#Show”).kliknij (funkcja ()$ („#demo”).show (2000);
);
$ („#Hide”).kliknij (funkcja ()
$ („#demo”).Hide (2000);
);
Ogłoszenie: Mieliśmy czas jako 2 sekundy, w przeciwnym razie zmiana będzie natychmiastowa i nie otrzymamy efektu podobnego do animacji.
Wykonaj plik i kliknij przycisk Ukryj, a otrzymasz następujący wynik:
Jak widać, otrzymujemy atrakcyjną animację, następnym krokiem jest przetestowanie animacji show, klikając przycisk show. Kliknij przycisk Pokaż, a otrzymasz następujące wyniki:
Jak widać, otrzymujemy gładką animację show \
Metoda slajdów ():
Możemy uzyskać również gładkie przejście slajdów w bibliotece jQuery. Otrzymujemy trzy funkcje animacji slajdowej, a mianowicie:
- wślizgiwać się()
- zjechać w dół()
- slidetoggle ()
Aby to zademonstrować, zamierzamy zaimplementować metodę slidetoggle (), użyj następujących wierszy w pliku HTML:
Mogę zniknąć i pojawić się ponownie
W przypadku kodu jQuery użyj następujących wierszy w pliku JavaScript:
$ („#przełącz”).kliknij (funkcja ()$ („#demo”).Slidetoggle („powolny”);
);
Otrzymujesz następujący wynik na ekranie:
Jak widać, mamy szybką i gładką animację przełączającą slajd za pomocą jQuery. Oprócz nich JQuery zapewnia całą masę innych metod animacji, które można wypróbować.
Wniosek
JQuery ma kilka atrakcyjnych efektów i metod animacji, które naprawdę wyróżniają stronę internetową. JQuery koncentruje się na tym, że kodowanie różnych metod, selektorów i animacji są zwięzłe dla programisty internetowego. Dlatego niektóre z najczęściej używanych animacji są owinięte w różne funkcje, które można wywołać za każdym razem, gdy życzy użytkownik. Dzisiaj, w tym poście, omówiliśmy, jak używać JQuery, aby wdrożyć niektóre z animacji \ Efekty na naszej stronie internetowej.