jQuery動畫 - 以不同的速度動畫不同的div

Question

我有5個div分層，前景中有一個對象，我想移動它們。這是使用paralax效果。我已經成功地使用jQuery中的基本.animate移動對象。

我遇到的問題是讓背景div正確地進行動畫 - 或者根本不。發生什麼事是當我點擊我的觸發器div - div.cloud1和div.cloud2在我的對象執行之前移動。儘管我玩的是時間價值，他們也會改變立場。

div中的所有對象都是絕對定位的 - divs相對於使用z-index是相對的。

具體而言，我試圖將div.cloud1，div.cloud2，div.ground，div.Mountain全部以不同的速度移動，因此它給出了3d的錯覺。

我發送的對象是不同的div。

我不確定是什麼問題。

這裏是我的jsfiddle：http://jsfiddle.net/U6Mu6/

jQuery(document).ready(function() { 
    jQuery('#cloud-01').css({ 
     backgroundPosition: '50 -180px' 
    }); 
    jQuery('#cloud-02').css({ 
     backgroundPosition: '0 -100px' 
    }); 
    jQuery('#mountains-03').css({ 
     backgroundPosition: '0 50px' 
    }); 
    jQuery('#trees-04').css({ 
     backgroundPosition: '0 50px' 
    }); 
    jQuery('#ground').css({ 
     backgroundPosition: 'left bottom' 
    }); 
    jQuery('#branding').css({ 
     backgroundPosition: 'center 0' 
    }); 
    jQuery('#content').css({ 
     backgroundPosition: 'center 0' 
    }); 
    jQuery('#sec-content').css({ 
     backgroundPosition: 'center 0' 
    }); 
    jQuery('#footer').css({ 
     backgroundPosition: 'center 0' 
    }); 
    jQuery('#wrapper').css({ 
     overflow: "hidden" 
    }); 

    jQuery('#klicker').click(function() { 
     jQuery('#cloud-01').animate({ 
      backgroundPosition: '(-100px -10px)' 
     }, 200000); 
     jQuery('#cloud-02').animate({ 
      backgroundPosition: '(-400px 0px)' 
     }, 20000); 
     jQuery('#mountains-03').animate({ 
      backgroundPosition: '(-2500px 50px)' 
     }, 20000); 
     jQuery('#ground').animate({ 
      backgroundPosition: '(-5000px bottom)' 
     }, 20000); 

     startHim(); 

     jQuery("#full-robot").animate({ 
      left: "50%", 
      marginLeft: "-150px" 
     }, 2000); 
     setTimeout("leaveScreen()", 15000); 
    }); 

}); 

var num = 1; 

function startHim() { 
    num++; 
    jQuery("#sec-content").animate({ 
     top: "-=5px" 
    }, 150).animate({ 
     top: "+=5px" 
    }, 150); 
    jQuery("#content,#branding").animate({ 
     top: "-=" + num + "px" 
    }, 150).animate({ 
     top: "+=" + num + "px" 
    }, 150); 
    if (num < 4) { 
     setTimeout("startHim()", 300); 
    } else { 
     setTimeout("bounceHim()", 300); 
    } 
} 

function bounceHim() { 
    jQuery("#sec-content,#branding").animate({ 
     top: "-=4px" 
    }, 150).animate({ 
     top: "+=4px" 
    }, 150); 
    jQuery("#content").animate({ 
     top: "-=8px" 
    }, 150).animate({ 
     top: "+=8px" 
    }, 150); 
    setTimeout("bounceHim()", 300); 
} 

function leaveScreen() { 
    jQuery("#full-robot").animate({ 
     left: "100%", 
     marginLeft: "0px" 
    }, 2000); 
} 

僅供參考 - 有的在擺弄的對象不包括故意的。我只想讓事情先行。

我在我的setTime表達式中看到了JSFIDDLE處理隱含eval的錯誤。但我不知道如何解決它。我想我可以傳遞div作爲函數，而不是使用.hide。

歡迎所有幫助，謝謝！

編輯:::

我忘了這一點：

/** 
* v. 1.02 
*/ 
(function($) { 
$.extend($.fx.step,{ 
'background-position': function(fx) { 
if (fx.state === 0 && typeof fx.end == 'string') { 
var start = $.curCSS(fx.elem,'background-position'); 
start = toArray(start); 
fx.start = [start[0],start[2]]; 
var end = toArray(fx.end); 
fx.end = [end[0],end[2]]; 
fx.unit = [end[1],end[3]]; 
} 
var nowPosX = []; 
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; 
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; 
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1]; 
function toArray(strg){ 
strg = strg.replace(/left|top/g,'0px'); 
strg = strg.replace(/right|bottom/g,'100%'); 
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2"); 
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); 
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]]; 
} 
} 
}); 

}）（jQuery的）; // JavaScript的文檔

Answer 1

我不知道這是不是太明顯了，但你的試圖通過使用backgroundPosition

設置雲的"background-position"屬性您可以將它們更改爲

$("#cloud-01").css({'background-position': '50px -180px'}) 

通知的background-position代替backgroundPosition

如果您想要錯開每個雲需要移動的時候，你需要以抵消動畫的持續時間，像

$('#cloud-01').animate({ 
     'background-position' : '(-100px -10px)' 
    }, (1000)); // 1 second duration 
    $('#cloud-02').animate({ 
     'background-position' : '(-400px 0px)' 
    }, (2000)); // 2 seconds 
    $('#mountains-03').animate({ 
     'background-position' : '(-2500px 50px)' 
    }, (2000)); // 3 seconds