Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Queues, stop(), finish()</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>#box{position:relative;width:60px;height:60px;background:#ffd54f;margin-top:8px}</style> </head> <body> <button id="go">Queue</button> <button id="stop">stop(true, true)</button> <button id="finish">finish()</button> <div id="box"></div> <script> $("#go").on("click", function(){ $("#box").animate({left: "+=100"}, 600) .animate({top: "+=60"}, 600) .animate({left: "-=100"}, 600) .animate({top: "-=60"}, 600); }); $("#stop").on("click", function(){ $("#box").stop(true, true); }); $("#finish").on("click", function(){ $("#box").finish(); }); </script> </body> </html>
Output