javascript - 带有 jQ​​uery 和固定步数的线性动画

Question

我正在尝试为 backgroundPositionY 元素的 <div> 制作动画。我尝试做的是对其进行线性动画处理。每一步都应该在一个固定的范围内。

例如:

step1: backgroundPositionY: 0 (192*0)
step2: backgroundPositionY: 192 (192*1)
step3: backgroundPositionY: 384 (192*2)

...等等

我当前的代码如下所示:

$curtains = $("#unshredder-curtains");
$curtains.data('backgroundPositionY', -3456);
$curtains.animate({
    backgroundPositionY: 3648
    }, {
    duration: 2000,
    easing: "linear",
    step: function(now, fx) {
        var newTop = Math.floor(now / 192) * 192;
        $(fx.elem).css('backgroundPositionY', newTop+'px');
    }
});

但是那没有任何作用。它只是像往常一样为背景设置动画。这些步骤将被忽略。

有谁知道如何制作那个特殊的动画吗？

谢谢:)

Answer 1

我可能会这样做:

var step = 192;
setInterval(function(){
    $('#unshredder-curtains').css('backgroundPositionY', function(i, val){
        var bgPosY = (parseInt(val) + step) + 'px';
        $(this).html('New position: ' + bgPosY);
        return bgPosY;
    });
}, 100);

您可以在此处查看实际效果:http://jsfiddle.net/pr7cc/