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' }) 

Answer 2

下面是一些優化代碼的技巧：

$（函數（）{

// animation Scroll 
    var posY1 = 0; 
    var posY2 = 0; 
    var posY3 = 0; 
    var imgH = 500; 
    //cache jquery var 
    var jqBackground = $('#background'); 
    var jqMidground = $('#midground') 
    var jqForeground = $('#foreground'); 
    function doAnimation(){ 
     //using setimeout insteadof setinterval 
     setTimeout(function(){ 
     if (posY1 <= -900) posY1 = 0; 
     if (posY2 <= -900) posY2 = 0; 
     if (posY3 <= -1200) posY3 = 0; 
     posY1 -= 1; 
     posY2 -= 2; 
     posY3 -= 3; 
     // using [].join replace '+',and jquery css method is not efficiency 
     jqBackground[0].style['backgroundPosition'] = ['0',posY1,'px'].join(''); 
     jqMidground[0].style['backgroundPosition'] = ['0',posY2,'px'].join(''); 
     jqForeground[0].style['backgroundPosition'] = ['0',posY3,'px'].join(''); 
     doAnimation(); 
     },50); 
    } 
    doAnimation(); 

}）;