运动正方形在一个圆圈内（jquery）。需要添加一行代码

Question

需要在原始圆圈中继续移动正方形。 P/s：当动画开始时，它会按圆移动，因此如果我按下按钮停止，它将停止在当前位置。但是，再次按下按钮时，GO正方形将替换到另一个位置。
看看这个请： https://jsfiddle.net/0nqnqf54/1/

$(document).ready(function() { 
     $("#button").click(function() { 
      var k; 
      for (k = 0; k < 200; k++) { 
       $("#square").animate({ 
        left: "+=300px" 
       }); 
       $("#square").animate({ 
        top: "+=300px" 
       }); 
       $("#square").animate({ 
        left: "-=300px" 
       }); 
       $("#square").animate({ 
        top: "-=300px" 
       }); 

      } 
     }); 

Answer 1

你需要设置的CSS属性的精确值不使用+=
捕捉当前位置和持续时间。

你可以试试这个：

$(document).ready(function() { 
    $("#button").click(function() { 
    startAnimate(1000);//set duration to 1 sec 
    }); 
    $("#button1").click(function() { 
    $("#square").stop(true); 
    }); 
}); 
var currentDuration = 0; 
function startAnimate(defaultDuration){ 
    var posLeft = parseFloat($('#square').css('left')); 
    var posTop = parseFloat($('#square').css('top')); 
    var optDuration=(currentDuration>0)?currentDuration:defaultDuration; 
    if(posTop==20 && posLeft<340){ 
    var cssProp = { left: "340px" }; 
    } 
    if(posTop<320 && posLeft==340){ 
    var cssProp = { top: "320px" }; 
    } 
    if(posTop==320 && posLeft>40){ 
    var cssProp = { left: "40px" }; 
    } 
    if(posTop>20 && posLeft==40){ 
    var cssProp = { top: "20px" }; 
    } 
    $("#square").animate(cssProp,{ 
    duration: optDuration, 
    complete: function(){startAnimate(defaultDuration)}, 
    progress: function(animation, progress, remainingMs){ 
     currentDuration = remainingMs; 
    } 
    }); 
}