Wprowadzenie do efektów jQuery
jQuery to jedna z najpopularniejszych bibliotek javascript, która została zaprojektowana w celu uproszczenia HTML DOM, tj. właściwości modelu obiektu dokumentu, takiego jak manipulacja i przechodzenie przez drzewo. Uproszczono także inne właściwości, takie jak obsługa zdarzeń, animacja Ajax i CSS. Jest to biblioteka typu open source i darmowa, która jest zwykle używana w 73% z 10 milionów stron internetowych, które są obecnie używane. Podstawowe funkcje jQuery obejmują selektory oparte na elementach DOM, manipulowanie i przechodzenie, co znacznie ułatwia i usprawnia pracę z jQuery. W tym temacie poznamy efekty jQuery.
Służy do zapewnienia bardzo prostego interfejsu do robienia różnego rodzaju niesamowitych efektów. Te metody pozwalają na szybkie użycie i zastosowanie najczęściej używanych efektów funkcji wraz z minimalnymi i minimalnymi konfiguracjami. Polecenie pokazywania i ukrywania elementów jest prawie takie samo, jak każdy, kto chciałby je zobaczyć. Polecenie Show () służy do wyświetlania elementów w całkowicie zawiniętym zestawie, a polecenie hide () służy do ich ukrywania.
Różne metody efektów jQuery:
Tutaj omawiamy różne rodzaje metod efektów jQuery
1) Animacja ()
Metoda animacji służy do wykonywania niestandardowej animacji dla zestawu właściwości CSS. Ta metoda służy do zmiany stanu elementu z jednego stanu do drugiego wraz ze stylami CSS. Wartość właściwości zmienia się stopniowo, tak aby można było uzyskać animowany efekt. Należy zauważyć, że animowane mogą być tylko wartości liczbowe, takie jak margines: 40 pikseli. Z drugiej strony wartości ciągów nie mogą być animowane, takie jak kolor tła: zielony. To znowu zawiera wyjątek dla ciągów takich jak show, hide i Toggle.
Składnia
(selector).animate((styles), duration, easing, callback)
Przykład
$("label").click(func()(
$("#box").animate((height: "100px"));
));
2) Opóźnienie ()
Jak sama nazwa wskazuje, ta służy do ustawienia opóźnienia wszystkich funkcji ustawionych w kolejce na wybranych elementach.
Składnia
$(selector).delay(duration, NameOfQueue)
Przykład
$("label").click(func()(
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
));
3) fadeToggle ()
Ta funkcja służy do przełączania między funkcjami zwiększania i zmniejszania głośności w różnych polach. Jeśli jakikolwiek element zaniknie, można użyć tej funkcji fadeToggle () do jego zanikania. Elementy, które są w formie ukrytej, nie będą wyświetlane jako część tej metody.
Składnia
$(selector).fadeToggle(duration, easing, callback)
Przykład
$("label").click(func()(
$("#box").fadeToggle();
));
4) fadeTo ()
Ta metoda służy do zmiany krycia wszystkich
tzn. elementy związane z akapitem stopniowo. Określone krycie w tym kontekście odnosi się do zmieniającego się krycia efektu.
Składnia
$(selector).fadeTo(duration, opacity, easing, callback)
Przykład
$("label").click(func()(
$("p").fadeTo(100, 0.9);
));
5) clearQueue ()
Ta metoda jest taka sama jak sugerowana przez nazwę. Służy do czyszczenia kolejki i usuwa wszystkie elementy z kolejki, które nie zostały uruchomione. Funkcja zakończy swój bieg po uruchomieniu. Jest to związane z dwiema metodami, a mianowicie. queue () i dequeue ().
Składnia
$(selector).clearQueue(NameOfQueue)
Przykład
$("label").click(func()(
$("box").clearQueue();
));
6) wykończenie ()
Ta metoda w jQuery służy do zakończenia lub zakończenia aktualnie działającego animatora, ponieważ służy do zatrzymania wszystkich aktualnie uruchomionych animacji i służy do usunięcia wszystkich animacji w kolejce. Służy również do ukończenia wszystkich animacji dla różnych zakresów wybranych elementów. Ta metoda jest podobna do metod takich jak .stop, który ma oba prawdziwe parametry. Główną różnicą między tą metodą a wykończeniem jest to, że metoda wykończenia służy do zatrzymywania i wstrzymywania typów właściwości elementu CSS wszystkich animacji w kolejce.
Składnia
$(selector).finish(NameOfQueue)
Przykład
$("#complete").click(func()(
$("div1").finish();
));
7) dequeue ()
Ta metoda służy do usunięcia kolejnej funkcji z kolejki, a następnie służy do wykonania funkcji. Kolejka to jedna lub więcej funkcji oczekujących na uruchomienie w potoku. Ta metoda usuwania kolejki jest używana wraz z metodą kolejki. Jeden element może mieć kilka kolejek. Kolejka fx jest najczęstszą, która jest również kolejką domyślną.
Składnia
$(selector).dequeue(NameOfQueue)
Przykład
$("label").queue(func()(
$("").css("background-color", "black");
$("div").dequeue();
));
8) slideDown ()
Jest to kolejna przydatna metoda w jQuery, która służy do przesuwania w dół lub wyświetlania wybranych list elementów. Należy tutaj zauważyć, że działa również na elementach, które są w formacie ukrytym, a typ wyświetlania jest pokazany jako żaden w przypadku CSS, ale widoczność nie musi być ukryta.
Składnia
$(selector). slideDown (duration, easing, callback)
Przykład
$("label").queue(func()(
$("p").slideDown();
));
9) slideUp ()
Metoda SlideUp () służy do ukrywania wszystkich
wybrane elementy. Elementy w ukrytej formie nie będą w ogóle wyświetlane. Nie wpływa to zatem na układ strony.
Składnia
$(selector).slideUp(duration, easing, callback)
Przykład
$("label").queue(func()(
$("p").slideUp();
));
10) slideDown ()
W przeciwieństwie do metody slideUp () ta metoda służy do wyświetlania wszystkich ukrytych
elementy. Ta metoda slidedown () działa na wszystkich elementach, które są również powiązane z metodami ukrytymi w przypadku metod jQuery, a nazwa jest również wyświetlana w CSS, ale widoczność nie jest ukryta.
Składnia
$(selector).slideDown(duration, easing, callback)
Przykład
$("label").queue(func()(
$("p").slideDown();
));
11) Toggle ()
Ta metoda służy do przełączania między pokazem a ukrywaniem różnych
elementy oparte. Ta metoda służy do sprawdzania widoczności elementów. Metoda show () jest używana do uruchamiania, nawet gdy element jest ukryty. Hide () jest uruchamiany, nawet gdy element jest widoczny. Zarówno metody pokazywania, jak i ukrywania w połączeniu tworzą efekt przełączania, a zatem metoda toggle ().
Składnia
$(selector).toggle(duration, easing, callback)
Przykład
$("label").queue(func()(
$("p").toggle();
));
12) slideToggle ()
Ta metoda służy do przełączania między funkcjami slideUp () i slideDown () dla wszystkich elementów opartych na akapicie. Ta metoda służy do sprawdzania elementów wybranych do widoczności. SlideDown () to funkcja, którą można zobaczyć, gdy element jest ukryty. Natomiast element slideUp () należy uruchomić, jeśli element jest widoczny.
Składnia
$(selector).slideToggle(duration, easing, callback)
Przykład
$("label").queue(func()(
$("p").slideToggle();
));
jQuery pozwala nam dodawać efekty na stronie internetowej, zapewniając wiele funkcji, które można umieścić na różnych selektorach. To od Ciebie zależy, w jaki sposób chcesz, aby Twoje strony wyglądały bardziej efektownie. Mam nadzieję, że podoba Ci się nasz artykuł. Bądź na bieżąco z naszym blogiem, aby uzyskać więcej takich artykułów.
Polecane artykuły
To jest przewodnik po efektach jQuery. Omówiliśmy tutaj różne rodzaje metod efektów jQuery ze składnią i przykładem. Możesz także spojrzeć na następujący artykuł, aby dowiedzieć się więcej -
- Zastosowania JQuery
- jQuery Alternatywy
- Polecenia zapytania MySQL
- Co to jest procedura w SQL?
- jQuery querySelector