jQuery：使用 setTimeout 在无限循环内平滑更改元素的左侧位置答案

【问题标题】：jQuery : smoothly change left position of the element inside of a infinite loop using setTimeoutjQuery：使用 setTimeout 在无限循环内平滑更改元素的左侧位置
【发布时间】：2014-03-05 12:06:21
【问题描述】：

我正在尝试构建一个非常简单的滚动条，如果图像向左无限滚动，则其中的数字。我通过克隆包含缩略图数量的主元素并将其作为同级附加到主容器来做到这一点。我遇到的问题是动画的平滑度，因为我使用 jQuery 的 css() 方法在 setTimeout() 函数中每 10ms 减去 1px。

我实际上有 2 个问题：

setTimeout 和 clearTimeout() 是无限循环的正确方法吗
有没有使用 css() 方法平滑动画的有效方法？使用 animate() 不会矫枉过正吗？

带循环的方法：

scrollContainers : function() {

    var self = this;

    clearTimeout(self.timeout);

    self.timeout = setTimeout(function() {

        var firstContainerPosition = self.containers[0].position();
        var secondContainerPosition = self.containers[1].position();


        if (Math.abs(firstContainerPosition.left) > self.containerWidth) {

            $(self.containers[0]).css('left', self.containerWidth);

        } else {

            $(self.containers[0]).css({ left : firstContainerPosition.left - 1 });

        }

        if (Math.abs(secondContainerPosition.left) > self.containerWidth) {

            $(self.containers[1]).css({ 'left' : self.containerWidth });

        } else {

            $(self.containers[1]).css({ left : secondContainerPosition.left - 1 });

        }

        self.scrollContainers();

    }, 10);

},

【问题讨论】：

嘿，请看stackoverflow.com/questions/22174010/… 最后一个答案有无限旋转 - 不需要超时，只需要动画 + 回调。
谢谢@JF - 我不确定这将如何处理需要同时移动的两个容器 - 有什么建议吗？
嗨@Spencer Mark，添加了多个 div 动画的答案..

标签： jquery settimeout infinite-loop cleartimeout

【解决方案1】：

如上评论 - 动画 2+ 容器很好，只需添加要移动的元素的选择器：

http://jsfiddle.net/QfeC2/12/ 他们会一起工作的。 ie 中似乎也没有任何滞后问题。

var boolDirection = true;

function AnimateRotate(angle) {
// caching the object for performance reasons
var $elem = $('div');

// we use a pseudo object for the animation
// (starts from `0` to `angle`), you can name it as you want
$({deg: 0}).animate({deg: angle}, {
    duration: 2000,
    step: function(now) {
        // in the step-callback (that is fired each step of the animation),
        // you can use the `now` paramter which contains the current
        // animation-position (`0` up to `angle`)
        $elem.css({
            transform: 'rotate(' + now + 'deg)'
        });
    },
    complete: function(){
        if(boolDirection)
        {
        AnimateRotate(-360);
            boolDirection = false;
        }
        else
        {
            AnimateRotate(360);
            boolDirection=true;
        }
    }
});
} 
AnimateRotate(360);

【讨论】：

你可以为任何风格/动作制作动画。请参阅api.jquery.com/animate，如果你想变得花哨，效果选项卡可能适合你。

【解决方案2】：

ad 1) 对于动画来说，使用 requestAnimationFrame 比使用超时更好。你可以在这里阅读更多关于它的信息http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

ad 2) 动画位置的最佳方法是通过 translate 而不是左属性来实现 - 更多信息请参见 Paul Irish 博客 http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

【讨论】：