0

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

我实际上有两个问题：

  1. 带有 clearTimeout() 的 setTimeout 是无限循环的正确方法吗

  2. 是否有使用 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);

},
4

2 回答 2

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);
于 2014-03-05T12:49:46.050 回答
0

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

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

于 2014-03-05T12:52:31.880 回答