円内の動きの四角形（Jquery）。1行のコードを追加する必要があります。

Question

最初の円の中で正方形の移動を続ける必要があります。 P/s：アニメーションが始まると円で移動するので、ボタンストップを押すと現在の位置で停止します。もう一度押すと、GOの正方形が別の位置に置き換えられます。あなたが現在位置と持続時間をキャッチ+=
を使用していないCSSプロパティの正確な値を設定する必要が 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

：ください、この時
ルック。

あなたはこの試みることができる：

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