停止并重播动画以相同的速度导致结果看起来很慢答案

【问题标题】：Stop and replay animation getting a same speed cause the outcome looks slow停止并重播动画以相同的速度导致结果看起来很慢
【发布时间】：2016-10-25 08:08:09
【问题描述】：

目前我有一个无限循环动画，那是循环上的一些元素，比如 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

这是另一个简化版本。当动画快结束时，当我点击停止并重新开始时，动画变得非常缓慢，我知道这是一个持续时间问题。有人知道如何解决这个问题吗？

jsFiddle here

【问题讨论】：

很难想象这个问题，你能在jsfiddle.net中给我们展示一个工作示例吗？
（继续 @RoryMcCrossan 的）或 Stackoverflow 的 Snippet。
给你，我在 jsfiddle 中创建的是简化版。 jsfiddle.net/xcg3xtsq/2
抱歉我的英语不好，我确实尝试过 clearQueue 并停止，但是一旦我再次回调动画，动画实际上会占用之前的持续时间但不会继续。你有什么解决办法吗？

标签： jquery animation

【解决方案1】：

正如您所提到的，问题在于达到目标的持续时间是 3 秒。意思是，盒子离目标越近，它走得越慢。

一种解决方法是根据剩余距离设置持续时间。使用第二个例子：

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，为了在（重新）开始动画时更线性运动，您可以将easing 设置为linear : fiddle

【讨论】：

谢谢兄弟，你太棒了:)