Движение квадрата по кругу (JQuery). Добавлять один код строки

Question

Необходимо продолжить движение квадрата в начальном круге. P/s: когда анимация начинается, она перемещается по кругу, поэтому, если я нажимаю кнопку, она останавливается в текущем положении. Но при повторном нажатии кнопка GO square заменит на другую позицию.
Посмотрите на это пожалуйста: 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; 
    } 
    }); 
}