Wyjaśniono metody przesuwane jQuery

Zjawisko przesuwne pozwala wsunąć lub zsunąć elementy DOM. Czasami panel jest dołączony do elementów, które dostarczają dodatkowych informacji. Te panele są przesuwane w górę/w dół w zależności od wymagania.

JQuery obsługuje trzy metody przesuwne, które są przesuwane (), Slidedown () i Slidetoggle (). Metody Slajdeup () lub Slidedown () przesuwają elementy odpowiednio w kierunku w górę lub w dół. Alternatywnie, metoda slidetoggle () określa, czy element jest w stanie slajdów (), czy w Slidedown (). Na przykład, jeśli element jest w stanie slajdów (), wówczas Slidetoggle () zsunie element w dół i odwrotnie.

W tym artykule szczegółowo pokazuje metody przesuwania jQuery i służy następującym wynikach uczenia się.

• Praca metod SlideUp (), Slidedown () i Slidetoggle ()
• Demonstracja metod przesuwania jQuery przy użyciu przykładów

Jak działają metody przesuwane jQuery

Ta sekcja zawiera mechanizm pracy metod przesuwania jQuery poprzez opracowanie składni. Dodatkowo podano przykład, który odnosi się do każdej metody jQuery osobno. Eksplorujmy metody ślizgania się JQuery jeden po drugim.

Jak użyć metody SlideUp ()

Ta metoda przesuwa element w górę za pomocą slajdów jQuery ().

Składnia

$ (selektor).slajd (prędkość, oddzwonienie);

W powyższej składni,

• selektor może być dowolnym elementem lub może odnosić się do identyfikator klasy elementu
• Parametr prędkości decyduje, jak szybko/powolny element zostanie przesunięty w górę, a wartości prędkość może być powolne, szybkie lub milisekund (wartość liczbowa)
• oddzwonić jest opcjonalnie i służy do uzyskania pewnego wyjścia po ukończeniu przesuwania

Przykład

Poniższe wiersze kodu praktykują metodę JQuery Slideup ().

Kod wyjaśniono tutaj

• „„sztywny”Klasa odnosi się do głównego panelu (od którego zależy ślizganie się)
• „„Sec„Klasa jest używana dla panelu wtórnego (który zostanie przesunięty w górę)
• Prędkość przesuwna jest ustawiona na „szybko"

Wyjście

Przed przesunięciem

Po ślizganiu się w kierunku w górę

Jak używać metody Slidedown ()

Metoda Slidedown () przesuwa element w kierunku w dół.

Składnia

$ (selektor).SLIDEDOWN (prędkość, wywołanie zwrotne);

Przykład

Wykorzystanie metody JQuery Slidedown () jest pokazane przez wykonanie następującego kodu.

Powyższy kod jest opisany jako,

• „„.główny„Klasa akapitu jest tworzona i jest używana jako element podstawowy (używany do zjechania panelu)
• „„.Sec”Odnosi się do innego akapitu, który zostanie ześlizgnięty po kliknięciu”.główny„Akapit klasy
• prędkość przesuwania się jest ustawiona powolny

Notatka: Element, który zostanie zsunięty w dół, musi mieć ustawioną właściwość wyświetlania nic.

Wyjście

Przed zsuwaniem się

Po kliknięciu akapit (class = ”Sec„) Zostanie zsuwany, jak pokazano poniżej.

Jak używać metody Slidetoggle ()

Slidetoggle () przesuwa element, jeśli element jest w stanie zjeżdżalni, a jeśli element jest w stanie zjeżdżalni, przesunąłby element w kierunku w dół.

Składnia

$ (selektor).Slidetoggle (prędkość, wywołanie zwrotne);

Przykład

Aby ćwiczyć metodę JQuery Slidetoggle (), wykorzystaliśmy następujący kod.

W powyższym kodzie,

• „„sztywny”Klasa reprezentuje element podstawowy (od którego zależy ślizganie się)
• „„Sec”Klasa odnosi się do elementu, który zostanie przesunięty w górę/w dół
• Prędkość przesuwna jest ustawiony w milisekundach (1000)

Wyjście

Przed ślizganiem się

Po zastosowaniu metody Slidetoggle ()

Jeśli będziesz kliknąć element podstawowy, suwak będzie nadal zmieniać swój stan.

Wniosek

Aby przesunąć element w kierunku w górę lub w dół, JQuery oferuje trzy metody: Slidedown (), Slideup () i Slidetoggle (). Ten opisowy post zapewnia działanie, a także użycie każdej metody przesuwnej. Metody Slidedown () i Slideup () są wykonywane w celu przesuwania elementu odpowiednio w kierunku w dół i w górę. Z drugiej strony metoda Slidetoggle () zmienia bieżący stan elementu z poślizgu na zjeżdżalnię i odwrotnie.