---

Search posts under jQuery:

---

.stop() - Stop animation in jQuery

How to stop currently executing animation on html element in jQuery?

To stop currently executing animation for an element, stop() function can be used. When the currently executing animation stops, the next animation in the queue starts (if exists).

<input type="button" id="btnStart" value="Start" />
 <input type="button" id="btnStop" value="Stop" />

<div id="divStop" style="height: 50px; width: 50px; background: brown;
 left: 300px;position: absolute; display:none ;"></div>

<script>
$("#btnStart").click(function () {
     $("#divStop").show("slow"); // 1st animation
     $("#divStop").animate({ width: '+=200px' }, 2000); // 2nd animation
     $("#divStop").animate({ width: '-=200px' }, 1500); // 3rd animation
});

$("#btnStop").click(function () {
    $("#divStop").stop();
});
</script>

In the above code when “btnStart” button will be clicked (all three animation statements starts one after another), the ”divStop” element will be shown (1^st animation) and then it's width will start increasing (2^nd animation); suppose while its width is increasing user clicks on the “btnStop” button then this particular animation (of increasing the width of "divStop element) will stop and next animation (3^rd animation of decreasing the width) will begin .