Método clearQueue
El método clearQueue nos permite eliminar de la
cola todas las funciones que no se han ejecutado.
Sintaxis
Así podemos limpiar la cola de funciones. Se puede pasar
como parámetro opcional el nombre de la cola
en forma de cadena (por defecto fx - cola
estándar de efectos). Si no se pasa ningún
parámetro, se eliminarán todas las funciones
restantes de la cola fx:
.clearQueue([nombre de la cola]);
Este método es similar al método
stop. Pero,
mientras que este último solo puede trabajar con animaciones,
clearQueue permite trabajar con cualquier cola
jQuery que haya sido añadida con el método
queue.
Ejemplo
Al hacer clic en el botón #start,
iniciaremos la animación. Al hacer clic en
el botón #stop detendremos la animación
y limpiaremos la cola usando el método
clearQueue. Al hacer clic nuevamente en
#start la animación comenzará de nuevo:
<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();
});
