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/

使用jQuery和固定步数的线性动画

1 个答案: