jQuery试图通过将3个变量加在一起来为新高度设置动画

Question

我有一个div，我正在尝试通过将其他3个div的高度相加来动画到一个新的高度。 我不确定为什么它们不加在一起，但我可以使用一些帮助，提前感谢您的任何建议。

var staff_CONTAINER_850_ht = $('#staff_CONTAINER_850').height();
var profile_850_BIO_ht = $('#profile_850_BIO').height();
var profile_850_EDU_ht = $('#profile_850_EDU').height();
var profile_850_CONTACT_ht = $('#profile_850_CONTACT').height();
var profile_TOTAL_ht = profile_850_BIO_ht + profile_850_EDU_ht +    
profile_850_CONTACT_ht;
$("#launcher").click(function() {
$("#staff_CONTAINER_850").animate({
    height: profile_TOTAL_ht
}, 300);
$("#staff_CONTAINER_850").animate({
    marginTop: staff_CONTAINER_850_ht* -1
}, 300);

$("#profile_850_HEADER").animate({
    marginTop: 45
}, 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);

}); 

Answer 1

确保在 document.ready 上运行代码：

$(function(){
    var staff_CONTAINER_850_ht = $('#staff_CONTAINER_850').height();
    var profile_850_BIO_ht = $('#profile_850_BIO').height();
    var profile_850_EDU_ht = $('#profile_850_EDU').height();
    var profile_850_CONTACT_ht = $('#profile_850_CONTACT').height();
    var profile_TOTAL_ht = profile_850_BIO_ht + profile_850_EDU_ht +    
    // ECT....
});

如果你不这样做，那么高度都将null，你将尝试在一个不存在的元素上设置高度。