Question

我正在尝试构建一个非常简单的滚动条，其中图像的数字是无限滚动的。我是通过克隆包含许多缩略图的主元素并将其作为兄弟附加到主容器来实现的。我遇到的问题是动画的流畅性，因为我使用jQuery的css（）方法在setTimeout（）函数中每10ms减去1px。

我实际上有两个问题：

带有clearTimeout（）的setTimeout是无限循环的正确方法
有没有一种使用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);

},

Answer 1

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

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

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);

Answer 2

ad 1）对于动画更好的是使用requestAnimationFrame而不是超时。你可以在这里阅读更多相关信息http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

ad 2）动画定位的最佳方式是通过翻译而不是左侧属性来做 - 更多关于保罗爱尔兰博客http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

jQuery：使用setTimeout平滑地改变无限循环内元素的左侧位置

2 个答案: