Vamos a repasar la función de jQuery stop(), la funcionalidad es la de detener las funciones o efectos que se estén ejecutando antes de que finalicen.
Otras funciones para trabajar con las ejecuciones de las funciones en jQuery son:
Veamos la sintaxis extraída de su web oficial:
$(selector).stop(stopAll, goToEnd);
Os explico los parámetros:
Os voy a poner una serie de ejemplos de jQuery stop() para ver su funcionalidad:
$(document).ready(function() { $("#comenzarefectos").click(function(){ $("#funciones").slideUp(6000); $("#funciones").slideDown(6000); }); $("#paratodo").click(function(){ $("#funciones").stop(true); }); $("#finalizaefectoactual").click(function(){ $("#funciones").stop(false,true); }); });
Os explico el ejemplo con los 3 primeros botones:
$(document).ready(function() { var MiColaDeFunciones = $("#funciones"); $("#botoncomenzarcola").click(function(){ MiColaDeFunciones.fadeOut(6000); MiColaDeFunciones.fadeIn(6000); }); $("#botonstopcola").click(function(){ MiColaDeFunciones.stop(); }); });
Os explico el ejemplo con los 2 botones que trabajan con colas de funciones, para el ejemplo se crea la cola ‘MiColaDeFunciones‘ en el selector ‘#funciones‘:
El código HTML de los botones y el rectángulo es el siguiente:
<div id="funciones" style="width:300px; height:80px; background-color: #555; color:#fff;">En este rectángulo se harán los efectos</div> <input type="button" id="comenzarefectos" value="Comenzar efectos"> <input type="button" id="paratodo" value="Detener efectos actuales"> <input type="button" id="finalizaefectoactual" value="Finalizar efecto actual y realizar siguiente"> <input type="button" id="botoncomenzarcola" value="Comenzar ejecución de la cola"> <input type="button" id="botonstopcola" value="Parar ejecución de la cola actual">
jQuery stop() también puede paralizar animaciones como animate(), show y hide(), toggle()…
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: