Método clearQueue
O método clearQueue nos permite remover da
fila todas as funções que não foram executadas.
Sintaxe
É assim que podemos limpar a fila de funções. Podemos passar
o nome da fila como parâmetro opcional
na forma de string (por padrão fx - a fila padrão
de efeitos). Se nenhum parâmetro for passado,
todas as funções restantes na fila fx serão removidas:
.clearQueue([nome da fila]);
Este método é semelhante ao método
stop. Mas,
enquanto o último funciona apenas com animação,
clearQueue permite trabalhar com qualquer fila
jQuery que foi adicionada pelo método
queue.
Exemplo
Vamos fazer com que ao clicar no botão #start,
a animação seja iniciada. Ao clicar no
botão #stop, vamos parar a animação
e limpar a fila usando o método
clearQueue. Ao clicar novamente em
#start, a animação será reiniciada:
<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();
});
