Jak zatrzymać animację lub efekt w jQuery

Jak zatrzymać animację lub efekt w jQuery

Animacje lub efekty sprawiają, że treść jest prezentowana dla użytkowników końcowych. JQuery oferuje różne metody, takie jak animate (), fadein (), fadeout () itp., Dodać animację lub efekt. Co jeśli chcesz zatrzymać animację lub efekt? Możesz to zrobić, zobaczmy, jak?

Metoda Stop () pomaga zatrzymać animację lub efekt w JQuery. Metoda Stop zapewnia różnorodne funkcje, takie jak natychmiastowe lub sekwencyjne zatrzymanie animacji/efektu. Ten artykuł pokazuje sposoby zatrzymania animacji lub efektu w JQuery.

Jak zatrzymać animację lub efekt w jQuery

Metoda Stop () w JQuery pomaga zatrzymać działając animację lub efekt. Składnia metody Stop () pokazano poniżej.

$ (selektor).Stop (Clearqueue, Jumptoend);

Selektorem może być dowolny element HTML lub klasa/id elementu. Ponadto metoda Stop () oferuje dwa parametry (które są opcjonalne, ale nie są konieczne)

  • Clearqueue: Akceptuje wartości logiczne (prawdziwe lub fałsz) i decyduje o powstrzymaniu nadchodzących animacji. FAŁSZ(Wartość domyślna) Wartość kieruje, że tylko bieżąca animacja zostanie zatrzymana, a inne animacje kolejowe zostaną później rozpoczęte. Natomiast PRAWDA wartość natychmiast kończy animację.
  • Jumptoend: Jego domyślna wartość to FAŁSZ, Jeśli PRAWDA Wartość jest przypisywana, a następnie kończy animacje, a kolejka jest również wyczyszczona.

Powyższa składnia działa dla różnych metod jQuery, takich jak Fading (), Sliding (), show (), hide ().

Jak zatrzymać animacje w jQuery

W tej sekcji praktykuje kilka przykładów, które prowadzą do zatrzymania animacji w różnych scenariuszach za pomocą metody stop ().

Przykład 1: Za pomocą metody stop () bez parametrów

Powyższy kod ożywia Szerokość div z prędkością milisekund = „5000". Ponadto metoda stop () zatrzymuje trwającą animację.

Wyjście

Przed animowaniem

Po losowym zastosowaniu metody Stop () (zatrzymanie się w dowolnym miejscu)

Przykład 2: Za pomocą metody Stop () z parametrami

Poniższa metoda praktyków kodu Stop () przy użyciu obu parametrów. A wartość parametru jest ustawiona PRAWDA.

Powyższy kod ożywia właściwość szerokości, a następnie stosuje się metodę stop (true, true).

Wyjście

Przed wykonaniem jakiejkolwiek akcji

Po rozpoczęciu animacji, gdy przycisk stop-Animation jest klikany, animacja kończy się natychmiast.

Jak zatrzymać efekt Fading () w jQuery

Metodę Stop () w jQuery może być również zastosowana do zatrzymania efektu. Kod podany poniżej ćwiczy efekt zanikania, a następnie metoda stop (), aby zatrzymać ten efekt.

Powyższy kod fOut Out the Div z prędkością 2500 milisekund i metoda stopu stosuje się do zatrzymania metody zanikania.

Wyjście

Przed rozpoczęciem/zatrzymaniem procesu zanikania

Po uruchomieniu procesu zanikania, po kliknięciu przycisku zatrzymania proces zanikania zostanie zatrzymany, jak pokazano na poniższym obrazku (w naszym przypadku).

Wniosek

Metoda Stop () JQuery służy do zatrzymania animacji lub efektu. Metoda stop () akceptuje dwa parametry i można ją zastosować bez parametrów. Oba parametry mają charakter logiczny, a zatem wartości prawdziwe/fałszywe są akceptowane tylko. Nauczyłbyś zastosowanie metody Stop () do zatrzymania animacji w JQuery. Ponadto metoda stop () jest również wykonywana metodą Fadeout () w jQuery.