showing results for - "jquery stop effect when button is pressed"
Claris
06 Sep 2020
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
queries leading to this page
cancel all jquery animations on new actionjquery animate for a time limit and stop automaticalyjquery function which can stop the animation of the above effect whilst in progress stopping element jquerystop class from being removed by ajax jquerystop animation immediately on clickingjquery stiojquery animation left and when click stop display valuejquery stop animation on elementjquery stop allstop animation in jquerystop jqueryjqeury stop 28 29anime stop jqueryjquery stop after 3 stop 28 29 jquerystop adding value in jqueryjquery animate stopstop to next process in jquerystop class from being removed by ajaxjqueryjquery stop methodrun one div stop another in htmljquery stop 28 29jquery stopclick to play and automatic stop jquerystop current animation on new jqueryhow to stop and start internal animation with a buttonstop animate jquerystop animation in j queryanimation stop 28 29 documentationcan i use stop 28toggel 29 on jquerystop sending me jquert code stop function jquerystop callback jqueryjquery stop animation after completejquery end animate after timerjquery cancel animation queue stop jqueryjquery stopjquery interruptjquery cancel stop functionjquery stop animatejquery cancel animationjquery stop 28jquery stop animationjquery stop animate after last clickhow to stop animate in jquerystop current animation on new jsjquery stop toggeling for timejquery after all animation stopjquery stop 28 false true 29 differences stop 28 29dpo animation inifnitejquery stop 28 29a jquery function which can stop the animationstop animation without plugin 2b jqueryjquery animatation inturrupting previous animationstop animation jquerystop all animations on click javascriptjquery stop effect when button is pressedstop 28true 2ctrue 29 jquerystop other instances of jqueryhow to stop anime in jqueryjquery stop effect when button is pressed