アニメーションを停止して再生すると同じスピードで結果が遅くなる

Question

現在、私は無限ループアニメーションを1つ持っていました。ループ1のbox1、box2、box3のようなループ上のいくつかの要素です。 ボックスをクリックすると何か情報がポップアップし、アニメーションが停止します.4秒後にもう一度やり直します。

しかし私が今直面している問題は、4秒後にアニメーションの時間が非常に遅くなってしまうことです。 ここに私のコードです。ここで

var timeoutBox; 

$('.sushi_box').on('click', function(){ 

    $('.sushi_item').removeClass('active'); 
    $(this).parent().addClass('active'); 
    // here another code for stop the sushi roll. 

    $('.total_roll').clearQueue().stop(); 

    // after 4 sec hide box; 
    clearTimeout(timeoutBox); 
    timeoutBox = setTimeout(function(){ 
     $('.sushi_item').removeClass('active'); 
     // here another code for reanimate the sushi roll. 

     animateLoop(); 

    }, 4000) 

}) 

function animateLoop(){ 

    var originWidth = $('.sushi_roll.origin').outerWidth(true); 

    $('.total_roll').animate({ "left": -originWidth }, { 
     easing:"linear", 
     duration:5000, 
     complete: function(){ 

      $('.total_roll').css({ "left": 0}); 

      originNumber++; 

      console.log(originNumber); 

      if(originNumber == 1){ 

       console.log(1); 
       var origin = $('.sushi_roll.origin').html(); 

       $('.sushi_roll.origin').remove(); 

       $('.total_roll').append('<div class="sushi_roll origin">'+origin+'</div>'); 

       var $sushiWidth = $('.sushi_roll .sushi_item').outerWidth(true); 
       var $sushiHeight = $('.sushi_item').outerHeight(true); 

       var $sushiOrginLength = $('.sushi_roll.origin .sushi_item').length; 
       var $sushiCloneLength = $('.sushi_roll.clone .sushi_item').length; 

       $('.sushi_roll.origin').css({ 
        "width" : $sushiOrginLength*$sushiWidth, 
        "height" : $sushiHeight 
       }); 

      } else if(originNumber == 2){ 

       console.log(2); 
       var clone = $('.sushi_roll.clone').html(); 

       $('.sushi_roll.clone').remove(); 

       $('.total_roll').append('<div class="sushi_roll clone">'+clone+'</div>'); 

       var $sushiWidth = $('.sushi_roll .sushi_item').outerWidth(true); 
       var $sushiHeight = $('.sushi_item').outerHeight(true); 

       var $sushiOrginLength = $('.sushi_roll.origin .sushi_item').length; 
       var $sushiCloneLength = $('.sushi_roll.clone .sushi_item').length; 

       $('.sushi_roll.clone').css({ 
        "width" : $sushiOrginLength*$sushiWidth, 
        "height" : $sushiHeight 
       }); 
      } 

      if(originNumber>=2){ 
       originNumber=0; 
      } 

      animateLoop(); 

     } 

    }); 
} 



animateLoop(); 

jsFiddle here

別の簡素化バージョンです。 アニメーションがほぼ終了したら、私を止めてもう一度やり直すと、アニメーションがextramになります。誰でもこれを解決する方法を知っていますか？

jsFiddle here

Answer 1

あなたが言及したように、問題がターゲットに到達するための所要時間は3秒であるということです。意味は、箱とターゲットとの距離が近いほど、遅くなります。

残りの距離に応じて時間を設定するのが1つの回避策です。第二の例を使用する：

var $box = $('.box'); 
var target = 300, defaultDuration = 3000, startX = $box.position().left; 

function animateLoop(duration){ 
    var x = $box.position().left - startX; 
    var duration = ((target - x)/target) * defaultDuration; 
    $box.animate({ "left": 300}, { 
    duration:duration, 
    complete: function(){ 
     $box.css({'left':0}); 
     animateLoop(); } 
    }); 
} 

Fiddle

PS、（再）アニメーションを開始するには、ユーザーが設定することができ、より直線運動のためのeasinglinearへ：fiddle