1<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <title>stop demo</title>
6 <style>
7 div {
8 position: absolute;
9 background-color: #abc;
10 left: 0px;
11 top: 30px;
12 width: 60px;
13 height: 60px;
14 margin: 5px;
15 }
16 </style>
17 <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
18</head>
19<body>
20
21<button id="go">Go</button>
22<button id="stop">STOP!</button>
23<button id="back">Back</button>
24<div class="block"></div>
25
26<script>
27// Start animation
28$( "#go" ).click(function() {
29 $( ".block" ).animate({ left: "+=100px" }, 2000 );
30});
31
32// Stop animation when button is clicked
33$( "#stop" ).click(function() {
34 $( ".block" ).stop();
35});
36
37// Start animation in the opposite direction
38$( "#back" ).click(function() {
39 $( ".block" ).animate({ left: "-=100px" }, 2000 );
40});
41</script>
42
43</body>
44</html>
45