javascript - 如何从初始阶段开始制作动画效果

Question

我正在制作一些动画效果，请参阅我的 fiddle :https://jsfiddle.net/sbhdqhn9/

如果我单击完成按钮，动画就会结束，但是当我再次启动动画时，它不会从初始阶段开始 第一次开始的地方。相反，它从结束点开始。

$(function() {

  $('#go').on('click', function() {
    $('.box').animate({
      'top': '+=200'
    }, 2000).animate({
      'left': '+=500'
    }, 2000).animate({
      'top': '-=200'
    }, 2000);
  });

  $('#bf').on('click', function() {
    $('.box').finish();
  });


})();

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 15px;
  height: 15px;
  background: black;
}
#path {
  height: 244px;
  font-size: 70%;
  border-left: 2px dashed red;
  border-bottom: 2px dashed green;
  border-right: 2px dashed blue;
}
button {
  width: 12em;
  display: block;
  text-align: left;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div id="path">
  <button id="go">Go</button>
  <br/>
  <button id="bf" class="b">.finish()</button>
</div>

Answer 1

重置“Go”按钮点击顶部的 top 和 left 属性

...
    $('.box').css('top', '10px');
    $('.box').css('left', '10px');
    $('.box').animate({
        ...

<小时/>

fiddle - https://jsfiddle.net/vw6o2npy/