jQuery > Effects methods

.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 (1st animation) and then it's width will start increasing (2nd 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 (3rd animation of decreasing the width) will begin .

 Views: 864 | Post Order: 96



Write for us