Javascript 如何从初始阶段开始设置动画效果

我正在制作一个小动画效果，看我的小提琴：

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

$（函数（）{
$（'go'）。在（'click'，function（）上{
$（'.box'）。设置动画({
“顶部”：“+=200”
}动画制作({
“左”：“+=500”
}动画制作({
“顶部”：“-=200”
}, 2000);
});
$（'#bf'）。在（'click'，function（）上{
$（'.box'）.finish（）；
});
})();
.box{
位置：绝对位置；
顶部：10px；
左：10px；
宽度：15px；
高度：15px；
背景：黑色；
}
#路径{
高度：244px；
字体大小：70%；
左边框：2个红色虚线；
边框底部：2个绿色虚线；
右边框：2个蓝色虚线；
}
钮扣{
宽度：12em；
显示：块；
文本对齐：左对齐；
保证金：0自动；
}

去


.finish（）
重置Go按钮顶部的
顶部
和
左侧
属性，然后单击

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


Fiddle-
当单击go按钮或finish按钮时，您需要将
顶部
和
左侧
定位重置为初始状态：
$（'.box'）.css（{top:'10px'，left:'10px'）
当前代码所做的是从它所在的任何位置设置动画。您应该考虑如何在每次单击时重置位置，而不是现在，它只是从它已经在的任何位置设置动画

potatopeelings提供的代码可以工作，但您应该自己尝试，这样才能理解为什么会得到不想要的结果。=）
 在设置动画之前，需要保存长方体的状态

var box = $('.box');
var position = null; 
      if(position === null)
      {
          position = box.position();    
      }
      box.css({
          top: position.top + 'px',
          left: position.left + 'px'                    
      });