АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP или фреймворки. Сегодня последний день для записи! Жми!
116 of 119 menu
НОВИНКА: Практика на Реальных Проектах и Работы в Портфолио. Бесплатный курс! Жми для записи!

Метод clearQueue

Метод clearQueue позволяет нам удалить из очереди все функции, которые не были запущены.

Синтаксис

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

.clearQueue([имя очереди]);

Этот метод аналогичен методу stop. Но, если последний может работать только с анимацией, то clearQueue позволяет работать с любой очередью jQuery, которая была добавлена методом queue.

Пример

Давайте при нажатии на кнопку #start, мы будем запускать анимацию. При нажатии на кнопку #stop мы будем останавливать анимацию и очищать очередь при помощи метода clearQueue. При повторном нажатии на #start анимация будет начинаться заново:

<button id="start">start</button> <button id="stop">stop</button> <div></div> div { position: absolute; margin: 3px; width: 50px; height: 50px; left: 0px; top: 30px; background: red; display: none; } div.newcolor { background: green; } $('#start').click(function() { let myDiv = $('div'); myDiv.show('slow'); myDiv.animate({ left: '+=200' }, 5000); myDiv.queue(function() { let that = $(this); that.addClass('newcolor'); that.dequeue(); }); myDiv.animate({ left: '-=200' }, 1500); myDiv.queue(function() { let that = $(this); that.removeClass('newcolor'); that.dequeue(); }); myDiv.slideUp(); }); $('#stop').click(function() { let myDiv = $('div'); myDiv.clearQueue(); myDiv.stop(); });

Смотрите также

  • метод queue,
    который позволяет показывать и изменять очередь функций
  • метод dequeue,
    который позволяет выполнить следующую функцию в очереди функций
  • метод stop,
    который позволяет остановить запущенную анимацию
  • метод animate,
    который анимирует свойства элементов
enru