Bewegung Quadrat in einem Kreis (Jquery) .Zum Hinzufügen einer Zeile Code

Question

Notwendigkeit, Bewegung des Quadrats im ersten Kreis fortzusetzen. P/s: wenn Animation startet, bewegt sich der Kreis, wenn ich Knopf drücke, stoppt er in der aktuellen Position. Aber, wenn Sie erneut drücken, wird der Knopf GO-Quadrat zu einer anderen Position wechseln.
Schauen Sie sich das bitte: 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

Sie müssen den genauen Wert der CSS-Eigenschaften die aktuelle Position und die Dauer mit +=
Fang nicht setzen.

Sie können dies versuchen:

$(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; 
    } 
    }); 
}