El método jQuery stop() en jQuery se usa para detener animaciones o efectos antes de que finalicen.
Este método funciona en todo tipo de animación, como deslizamiento, desvanecimiento y animaciones personalizadas.
Sintaxis:
$(selector).stop(stopAll, goToEnd);
Ejemplo-1: detener la animación deslizante.
<!DOCTYPE html> <html> <head> <title>jQuery stop() Method </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <style> #panel, #flip { padding: 5px; font-size: 18px; text-align: center; background-color: green; color: white; border: solid 1px #666; border-radius: 3px; } #panel { padding: 50px; display: none; } </style> </head> <body> <center> <h1 style="color:green;"> GeeksForGeeks</h1> <h2 id="GFG"> jQuery stop() Method</h2> <br> <button id="stop">Click </button> <br> <br> <div id="flip"> <h2>GeeksForGeeks</h2></div> <div id="panel"> A computer science portal for geeks </div> <script> $(document).ready(function() { $("#flip").click(function() { $("#panel").slideDown(5000); }); $("#stop").click(function() { $("#panel").stop(); }); }); </script> </center> </body> </html>
Producción:
Antes de hacer clic en GeeksForGeeks:
Después de hacer clic en GeeksForGeeks y no hacer clic en el botón:
Después de hacer clic en GeeksForGeeks y hacer clic en el botón:
Ejemplo-2: Deja de deslizarte de izquierda a derecha.
<!DOCTYPE html> <html> <head> <title>jQuery stop() Method</title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <style> #panel, #flip { padding: 5px; font-size: 18px; text-align: center; background-color: green; color: white; border: solid 1px #666; border-radius: 3px; } #panel { padding: 50px; display: none; } </style> </head> <body> <center> <h1 style="color:green;"> GeeksForGeeks</h1> <h2 id="GFG"> jQuery stop() Method</h2> <br> <button id="start">Start</button> <button id="stop">Stop</button> <br> <br> <div style="background:green; height:100px; width:400px; position:absolute;"> GeeksForGeeks </div> <script> $(document).ready(function() { $("#start").click(function() { $("div").animate({ left: '80px' }, 5000); $("div").animate({ fontSize: '3em' }, 5000); }); $("#stop").click(function() { $("div").stop(); }); }); </script> </center> </body> </html>
Producción:
Antes de hacer clic en Inicio:
Después de hacer clic en Iniciar y no hacer clic en Detener:
Después de hacer clic en Inicio y hacer clic en Detener:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA