将div重置为原始位置

Question

当我单击“重置”按钮时，我希望框转到其左上角的原始位置。我尝试使用动画，但无法正常工作。我需要具有动画和队列功能。

$("#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

您应该在重置按钮上添加一个click事件，并将finish()方法应用于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

您在寻找这个吗？

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

Answer 3

只需使用finish()重设所有正在进行的动画

 $("#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

在jquery中使用stop停止动画。

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

Answer 5

您可以通过.clearQueue()和.stop()进行操作，然后通过.css()应用初始CSS

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

Working fiddle