JQuery остановить анимацию

  1. JQuery остановить анимацию
  2. JQuery остановить очередь анимации
  3. О Панкадж

Мы можем использовать функцию jQuery stop (), чтобы остановить текущую анимацию соответствующих элементов.

Существует два варианта функции jQuery stop ().

  1. stop (логическое clearQueue, логическое jumpToEnd): значение по умолчанию для обоих аргументов - false. Мы можем передать clearQueue как true, чтобы остановить очередь анимация , Мы можем передать jumpToEnd как true, чтобы немедленно завершить текущую анимацию.
  2. stop (String queue, boolean clearQueue, boolean jumpToEnd): здесь мы можем передать имя очереди, чтобы остановить анимацию, два других аргумента такие же, как указано выше.

JQuery остановить анимацию

Вот простой пример для анимации остановки jQuery.


копия

<! DOCTYPE html> <html> <head> <title> Функция очереди jQueryClear </ title> <script src = "jquery-3.2.1.min.js"> </ script> <script> $ (document) .ready (function () {$ ("# startbtn"). click (function () {$ ("div"). animate ({height: 200}, 2000);}); $ ("# stopbtn"). click ( function () {$ ("div"). stop ();});}); </ script> </ head> <body> <button id = "startbtn"> Start </ button> <button id = "stopbtn"> Стоп </ button> <div style = "background: green; высота: 90px; ширина: 90 пикселей; "> </ div> </ body> </ html>

Обратите внимание, что я не передаю какой-либо параметр при вызове функции stop (), это потому, что есть только одна анимация, и я хочу, чтобы она остановилась, как только будет нажата кнопка остановки.

JQuery остановить очередь анимации

Вот пример, где очередь анимации очищается и текущая анимация также останавливается при нажатии кнопки остановки.


копия

<! DOCTYPE html> <html> <head> <title> Функция очереди jQueryClear </ title> <script src = "jquery-3.2.1.min.js"> </ script> <script> $ (document) .ready (function () {$ ("# startbtn"). click (function () {$ ("div"). animate ({height: 200}, 2000); $ ("div"). slideUp (2000); $ ("div"). slideDown (2000); $ ("div"). animate ({ширина: 300}, 1500); $ ("div"). animate ({height: 100}, 1500); $ (" div "). animate ({width: 100}, 1500);}); $ (" # stopbtn "). click (function () {// $ (" div "). clearQueue (); $ (" div ") ) .stop (true, false);});}); </ script> </ head> <body> <button id = "startbtn"> Start </ button> <button id = "stopbtn"> Стоп </ button> <div style = "background: green; высота: 90px; ширина: 90 пикселей; "> </ div> </ body> </ html>

На рисунке ниже показана вышеуказанная программа в действии.

На рисунке ниже показана вышеуказанная программа в действии

Это все для функции jQuery stop () и примера остановки анимации jQuery.

Ссылка: API Doc

Ссылка:   API Doc

О Панкадж

Я люблю технологии с открытым исходным кодом, и рассказывать о своем опыте с ними - моя страсть. Вы можете связаться со мной напрямую на facebook , щебет , а также YouTube ,