【问题标题】：Reset div to original position将 div 重置为原始位置
【发布时间】：2018-10-08 07:38:01
【问题描述】：

当我单击重置按钮时，我希望框回到左上角的原始位置。我尝试使用动画，但它不起作用。我需要有动画和队列功能。

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

【问题讨论】：

我将您的代码放在一个 sn-p 中，它看起来工作得非常好。你有什么问题？另请注意，使用 CSS 关键帧来实现您在此处所需的内容会更有意义。
谢谢。我只是想知道如何将盒子重置到原来的位置。

标签： javascript jquery

【解决方案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>

【讨论】：

【解决方案2】：

你在找这个吗？

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

在 jquery 中使用stop 来停止动画。

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

【讨论】：

【解决方案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

【讨论】：