jquery动画优化

Question

我将此脚本用于论坛上的动画。

我注意到它会产生某种延迟。有没有更好的方法来实现动画？还是改进代码以获得更流畅的体验？

$(function(){
    // animation Scroll
    var posY1 = 0;
    var posY2 = 0;
    var posY3 = 0;
    var imgH = 500;
    setInterval(function(){
        if (posY1 <= -900) posY1 = 0;
        if (posY2 <= -900) posY2 = 0;
        if (posY3 <= -1200) posY3 = 0;
        posY1 -= 1;
        posY2 -= 2;
        posY3 -= 3;
        $('#background').css({ backgroundPosition: '0' + posY1 + 'px' });
        $('#midground').css({ backgroundPosition: '0' + posY2 + 'px' });
        $('#foreground').css({ backgroundPosition: '0' + posY3 + 'px' });
    },50);
});

Answer 1

使用 jquery Amimate

$('#background').animate({ backgroundPosition: '0' + posY1 + 'px' },time needed to perform if needed);
$('#midground').animate({ backgroundPosition: '0' + posY2 + 'px' });
$('#foreground').animate({ backgroundPosition: '0' + posY3 + 'px' })