jquery動畫定位略有偏差

我有一個div我試圖動畫，我建立了它，所以它通過更改marginTop屬性進行動畫處理。唯一的問題是，當我將它設置爲marginTop時：它不是與包含div的頂部齊平，我不知道爲什麼。這很容易在jsfiddle中查看它，http://jsfiddle.net/loriensleafs/F3wjg/21/並通過點擊頂部的出版物文字來提示動畫。jquery動畫定位略有偏差

div的問題是profile_850_HEADER，當動畫看起來它去約10px的過去包含div的頂部，jQuery是：

var staff_CONTAINER_850_ht = $('#staff_CONTAINER_850').height(); 

$("#launcher").click(function() { 

$("#staff_CONTAINER_850").animate({ 
    marginTop: staff_CONTAINER_850_ht* -1 
}, 300); 


$("#profile_850_HEADER").animate({ 
    marginTop: 0 
}, 300); 
$("#profile_850_BIO").delay(120).animate({ 
    marginTop: 10 
}, 450); 
$("#profile_850_EDU").delay(220).animate({ 
    marginTop: 10 
}, 450); 
$("#profile_850_CONTACT").delay(320).animate({ 
    marginTop: 10 
}, 450); 


}); 


$(".close_850_profile").click(function() { 
$("#staff_CONTAINER_850").animate({ 
    marginTop: "0px" 
}, 300); 
$("#profile_850_HEADER").animate({ 
    marginTop: 500 
}, 200, function() { 
    $("#profile_850_BIO").css("margin-top", "485px"); 
    $("#profile_850_EDU").css("margin-top", "485px"); 
    $("#profile_850_CONTACT").css("margin-top", "485px"); 
}); 
});

這裏的任何幫助將是巨大的，我沒有想法爲什麼發生這種情況。

來源

2012-10-11 loriensleafs

這一切都是事情的順序問題，你使用document.ready()處理程序的原因。嘗試後您的移動高度計算（var staff_CONTAINER_850_ht = $('#staff_CONTAINER_850').height();）至您插入所有的CSS：

演示：http://jsfiddle.net/SO_AMK/vQz3t/

附：我對你的代碼進行了重新排序，並將CSS放在一個函數中，以便它首先運行。我也提出了一些「提示」。

P.S.S.我假設你沒有訪問任何CSS文件，這就是爲什麼你使用JavaScript，但是，如果你這樣做，你應該使用它們。

來源

2012-10-12 00:16:07

我的部分回覆慢，但我真的很感激提示！ – loriensleafs

jquery動畫定位略有偏差

回答

相關問題