0

我有一个要设置动画的 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");
});
});

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

4

1 回答 1

1

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

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

PS我重新排序了您的代码并将CSS放在一个函数中，以便它首先运行。我还放了一些“提示”。

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

于 2012-10-12T00:16:07.630 回答