Reset div to original position

Question

When I click on reset button I want the box to go to its original position at top left. I tried using animate but its not working. I need to have the animate and queue function.

 $("#start").click(function() { $("div") .show("fast").animate({ left: "+=200" }, 5000).queue(function() { $(this).addClass("newcolor").dequeue(); }).animate({ top: '+=0' }, 2000).queue(function() { $(this).addClass("newcolor").dequeue(); }).animate({ top: '+=100' }, 5000).queue(function() { $(this).addClass("newcolor").dequeue(); }).animate({ left: '-=200' }, 5000).queue(function() { $(this).addClass("newcolor").dequeue(); }).animate({ top: '-=100' }, 5000).queue(function() { $(this).addClass("newcolor").finish(); }) }); 

 body { border: 1px solid blue; width: 237px; height: 167px; } div { margin: 7px; width: 40px; height: 40px; position: absolute; left: 0px; top: 30px; background: green; display: none; } div.newcolor { background: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="start">Start</button> <button id="reset">Reset</button> <div></div> 

My JSFiddle

Answer 1

You should add a click event on reset button and apply finish() method to the div:

 $("#start").click(function() { $("div") .show("fast").animate({ left: "+=200" }, 5000).queue(function() { $(this).addClass("newcolor").dequeue(); }).animate({ top: '+=0' }, 2000).queue(function() { $(this).addClass("newcolor").dequeue(); }).animate({ top: '+=100' }, 5000).queue(function() { $(this).addClass("newcolor").dequeue(); }).animate({ left: '-=200' }, 5000).queue(function() { $(this).addClass("newcolor").dequeue(); }).animate({ top: '-=100' }, 5000).queue(function() { $(this).addClass("newcolor").finish(); }) }); $("#reset").click(function () { $("div").finish() }); 

 body { border: 1px solid blue; width: 237px; height: 167px; } div { margin: 7px; width: 40px; height: 40px; position: absolute; left: 0px; top: 30px; background: green; display: none; } div.newcolor { background: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="start">Start</button> <button id="reset">Reset</button> <div></div> 

Answer 2

Are you looking for this?

$("#reset").click(function(){
        $("div").stop( true, true );
        $("div").animate({
          left: 0,
          top: "30px"
        })
})

Answer 3

simply use finish() to reset any ongoing animation

  $("#reset").click(function(){ $("div").finish(); }); $("#start").click(function () { $("div") .show("fast") .animate({ left: "+=200" }, 5000) .queue(function () { $(this).addClass("newcolor").dequeue(); }) .animate({ top: '+=0' }, 2000) .queue(function () { $(this).addClass("newcolor").dequeue(); }) .animate({ top: '+=100' }, 5000) .queue(function () { $(this).addClass("newcolor").dequeue(); }) .animate({ left: '-=200' }, 5000) .queue(function () { $(this).addClass("newcolor").dequeue(); }) .animate({ top: '-=100' }, 5000) .queue(function () { $(this).addClass("newcolor").finish(); }) }); 

  body { border: 1px solid blue; width: 237px; height: 167px; } div { margin: 7px; width: 40px; height: 40px; position: absolute; left: 0px; top: 30px; background: green; display: none; } div.newcolor { background: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="start">Start</button> <button id="reset">Reset</button> <div></div> 

Answer 4

use stop in jquery to stop the animation.

$("#reset").click(function () {
     $("div").stop(true, true).fadeOut().removeAttr('style');
});

Answer 5

You can do it by .clearQueue() and .stop() and then, apply the initial CSS by .css()

$('#reset').click(function() {
    $('div')
    .clearQueue()
    .stop()
    .css({
        // Add the required CSS properties
        'left': '0px',
        'top': '30px',
        'background': 'green',
        'display': 'none'
    });
})

Working fiddle