Question

我有一个div我正试图制作动画，我设置它以便通过更改marginTop属性来动画。唯一的问题是当我将它设置为marginTop：O它不是与包含div的顶部齐平，我不知道为什么。这是很多，所以在jsfiddle http://jsfiddle.net/loriensleafs/F3wjg/21/中查看它更容易，点击顶部的出版物文本就会提示动画。

有问题的div是profile_850_HEADER，当它动画时，看起来它比包含div的顶部大约10px，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");
});
});

这里的任何帮助都会很棒，我不知道为什么会这样。

Answer 1

这完全取决于事物的顺序，与使用document.ready()处理程序的原因相同。在插入所有CSS之后，尝试将高度计算（var staff_CONTAINER_850_ht = $('#staff_CONTAINER_850').height();）移动到：

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

P.S。我重新排序了你的代码并将CSS放在一个函数中，以便它首先运行。我也提出了一些“提示”。

P.S.S。我假设您无法访问任何CSS文件，这就是您使用JavaScript的原因，但是，如果您这样做，您应该使用它们。

jquery动画定位稍微偏离

1 个答案: