Метод clearQueue - удаление элементов из очереди функций
Метод ⁅с⁆clearQueue⁅/с⁆ позволяет нам удалить из очереди все функции, которые не были запущены.
Синтаксис
Так мы можем очистить очередь функций. Можно передать
необязательным параметром название очереди
в виде строки (по умолчанию fx - стандартная
очередь эффектов). Если не передавать никаких
параметров, то из очереди fx удалятся все
оставшиеся функции:
.clearQueue([имя очереди]);
Этот метод аналогичен методу
stop. Но,
если последний может работать только с анимацией, то
⁅с⁆clearQueue⁅/с⁆ позволяет работать с любой очередью
jQuery, которая была добавлена методом
⁅с href="/ru/javascript/lib/jquery/manual/queue/"⁆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();
});