✅ Wdrażanie animacji z jQuery

Spisie treści

Animowane efekty w jQuery Nie są to animacje, które znamy, to znaczy nie będziemy wprawiać w ruch rysunku, ważne jest, aby to wyjaśnić, ponieważ może to prowadzić do zamieszania. Te animowane efekty odnoszą się do sposobu, w jaki generowane są przejścia elementów w obrębie SŁOŃCE, element, który może powoli przesuwać się z rogu przeglądarki lub znikać, rozpadając się na tysiące kawałków.
Na pierwszy rzut oka może się wydawać, że są dla nas przydatne, w końcu jeśli chcemy, aby jakiś element pojawił się lub zniknął, może nie mieć dla nas znaczenia, jak to się dzieje, jednak dla tych, którzy badają zachowanie interfejsy użytkownika Jest to bardzo ważne, ponieważ może ustawić nastrój użytkownika lub być wyświetlane jako subtelny sposób na uatrakcyjnienie wyglądu.
Są oczywiście tacy, którzy nadużywają i przesadzają w stosowaniu animowanych efektów i przeciążają interfejs tak bardzo, że staje się on ciężki lub zawodny i sprawia, że użytkownik cierpi podczas korzystania z systemu, dlatego konieczne jest posiadanie minimum sumienia i umiar przy stosowaniu tego typu efektów.
Ważne jest, aby wiedzieć, że różni rodzaje animacji Posiadają one szereg kontrolowanych opcji z wykonywanego przez nas połączenia, możemy kontrolować czas jego trwania, dzięki czemu możemy skalibrować czy efekt wpływa na użyteczność czy nie i czy w zależności od czasu jego trwania możemy go uszczegółowić i osiągnąć pożądany efekt oraz może również wskazywać funkcję lub metodę do wykonania w oddzwonić na końcu animacji, na przykład, jeśli sprawimy, że przycisk zniknie, gdy już go nie ma, wykonywana jest metoda, która następnie wysyła użytkownikowi wiadomość.
Inną opcją, jaką mamy, jest zdanie mapa obiektów w którym definiujemy zaawansowane lub ekskluzywne opcje animowanego efektu, którego używamy, jednak jest to przede wszystkim wtedy, gdy chcemy zrobić coś bardzo konkretnego i zaawansowanego. Składnia korzystania z tych opcji jest następująca:

 $ (selektor) .efekt (czas trwania); $ (selektor) .effect (czas trwania, funkcja CallBack); $ (selektor) .effect (functionCallBack); $ (selektor) .effect (mapObjects);

Ponieważ widzimy, że każda linia odpowiada każdej z możliwych odmian, które możemy zastosować w standardowych animacjach, możliwe jest, że jakaś animacja ma określoną charakterystykę, jednak w tych, które zobaczymy w tym samouczku, będziemy z tym pracować.
Jednym z najczęściej używanych i najbardziej użytecznych efektów, o których możemy pomyśleć, jest pokazywanie i ukrywanie elementów, a także okazuje się, że są to dość proste efekty w implementacji, dlatego użyjemy ich jako przykładu.
pokaż () i ukryj ()Metody, które pozwalają nam osiągnąć te cele, to: Pokazać() Tak ukryć (), ponieważ widzimy, że ich nazwy w języku angielskim odpowiadają czynności, pokaż dla pierwszego i ukryj dla drugiego, można je zastosować do dowolnego elementu w naszym SŁOŃCE, więc są całkiem praktyczne i przydatne.
Zrobimy małą animację, w której wykorzystamy czas trwania i wywołanie funkcji oddzwonić w momencie jego wykonania zastosujemy efekty Pokazać() Tak ukryć () dzięki czemu możemy dowiedzieć się, jak są one używane.
W poniższym kodzie widzimy, jak w pierwszej kolejności włączamy bibliotekę jQuery od jednego z CDN odpowiednie, dzięki temu unikniemy konieczności przechowywania go lokalnie, a tym samym skorzystamy z pamięci podręcznej przeglądarki.
Następnie definiujemy dwa bloki o imieniu przedmiot 1 Tak element2 odpowiednio, gdzie pierwszy jest ukryty, a drugi widoczny, a na końcu mamy przycisk z napisem start, do którego stosujemy zdarzenie kliknięcia, które wykonuje funkcję przekonywać().
Funkcja przekonywać() najpierw zastosuj animację Pokazać() do przedmiot 1 i daje mu wartość 1000 milisekund, co jest równe 1 sekundzie i do tego dodajemy a oddzwonić gdzie nakładamy efekt ukryć () nasz element2 i generuje komunikat na konsolę.
Wewnątrz animacji ukryć () do czego się stosujemy element2 stworzyliśmy oddzwonić gdzie również napiszemy wiadomość przez konsolę. Spójrzmy więc na kod naszego pierwszego przykładu:

Animacje

To jest nasz początkowy ukryty element

Aby uruchomić animację, kliknij przycisk

Początek

Zobaczmy teraz jak to wygląda w naszej przeglądarce, na następnym obrazku zobaczymy HTML Przed wykonaniem jakiejkolwiek czynności przyjrzyjmy się, jak przedmiot 1 nie pokazany:

Teraz na poniższym obrazku zobaczymy, co dzieje się po kliknięciu przycisku Początek, zauważymy, że teraz widzimy ukryty element i w konsoli będziemy mieli dwie wiadomości, jeśli wykonają przykład na żywo, zobaczą również, jak jeden element pojawia się jako pierwszy, a drugi później znika drugi:

W prosty sposób ożywiliśmy pokazywanie i ukrywanie elementów w naszym dokumencie HTML.
Są chwile, kiedy chcemy, aby przycisk działał jak przełącznik, pokazując i ukrywając element lub grupę elementów, chociaż jest to łatwe, oceniając stany i używając metod Pokazać() Tak ukryć (), prawda jest taka, że generowalibyśmy za dużo kodu na coś tak prostego, dlatego zespół jQuery pomyśleli o tym i podają nam metodę przełącznik ().
Co robi metoda toggle ()?Ta metoda ocenia bieżący stan elementu, a zatem, jeśli jest widoczny, ukrywa go, a jeśli jest ukryty, pokazuje go, jak wskazuje zachowanie typu przełącznika. Najlepsze jest to, że do tej metody możemy dodać różne opcje animacji, z czasem trwania i możliwością wykonania oddzwonić.
Zbudujmy teraz przykład, w którym zastosujemy w praktyce to, czego nauczyliśmy się o metodzie toggle(), zobaczmy poniższy kod:

 Animacje
Wynik wykonania efektu przełączania ().

Początek

W poniższym kodzie zobaczymy, jak stworzyliśmy div o nazwie przedmiot 1 który jest początkowo ukryty, potem mamy przycisk Początek który po kliknięciu wywoła funkcję animuj, będzie miał metodę przełącznik () zastosowany do elementu i w pierwszej kolejności pojawi się i wyświetli komunikat dla każdej konsoli.
Zobaczmy początkowy stan tego kodu przez przeglądarkę, zauważymy, że mamy tylko przycisk i nie ma nic w konsoli:

Zobaczmy teraz, jak po kliknięciu przycisku pojawia się ukryty element i odzwierciedla wiadomość do nas za pośrednictwem konsoli:

Wreszcie, jeśli ponownie klikniemy w przycisk, element zostanie ukryty, a komunikat powtórzy się w konsoli, co zauważymy, gdy zobaczymy numer trzy obok, który wskazuje, ile razy zdarzenie zostało wywołane.

tak ok Pokazać() Tak ukryć () Są skuteczne, na pierwszy rzut oka mogą wydawać się nieco proste, dlatego mamy inne metody, które pomagają nam tworzyć różne animacje, w tym przypadku mówimy znikać Tak ślizgać się które odpowiadają zanikaniu i ślizganiu się, przy czym pierwszy ma efekt podobny do pojawiania się, a drugi ślizga się od krawędzi ekranu lub pojemnika elementu.
Zobaczmy na poniższej liście jego odpowiedniki do Pokazać() i do ukryć ():
zanikanie () i przesuwanie ()Odpowiadają one efektom, aby pokazać elementy, czyli są równoważne z Pokazać().
zanikanie i wysuwanie ()Odpowiadają one efektom ukrywania elementów, czyli są równoważne z ukryć ().
fadeToggle () i slideToggle ()Jest trzeci przypadek i to ten, który odpowiada efektom typu switch i są one równoważne przełącznik ().
W ramach ćwiczenia pozwolimy Ci ponownie przejrzeć przykłady, ale przy użyciu tych nowych metod, abyś mógł z pierwszej ręki zobaczyć, jak działają.
Na tym kończymy ten samouczek, nauczyliśmy się animować nasze elementy w subtelny i inteligentny sposób, ważne jest, aby nie nadużywać tych efektów w sposobie umieszczania bardzo długich czasów animacji, ponieważ to, co osiągniemy, to zirytowanie użytkownika i opóźnić swoją pracę, pamiętając, że przede wszystkim musimy zachować użyteczność.