https://api.jquery.com/clearQueue/
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>clearQueue demo</title> <style> div { margin: 3px; width: 40px; height: 40px; position: absolute; left: 0px; top: 30px; background: green; display: none; } div.newcolor { background: blue; } </style> <script src="https://code.jquery.com/jquery-3.7.0.js"></script> </head> <body> <button id="start">Start</button> <button id="stop">Stop</button> <div></div> <script> $( "#start" ).on( "click", function() { var myDiv = $( "div" ); myDiv.show( "slow" ); myDiv.animate({ left:"+=200" }, 5000 ); myDiv.queue(function() { var that = $( this ); that.addClass( "newcolor" ); that.dequeue(); }); myDiv.animate({ left:"-=200" }, 1500 ); myDiv.queue(function() { var that = $( this ); that.removeClass( "newcolor" ); that.dequeue(); }); myDiv.slideUp(); }); $( "#stop" ).on( "click", function() { var myDiv = $( "div" ); myDiv.clearQueue(); myDiv.stop(); }); </script> </body> </html> |