0

アニメーション化しようとしている div があります。marginTop プロパティを変更してアニメーション化するように設定しました。唯一の問題は、marginTop にアニメーション化するときです。O を含む div の上部と同じ高さではなく、理由がわかりません。たくさんあるので、jsfiddle で見る方が簡単です。

問題の div は profile_850_HEADER です。アニメーション化すると、含まれている div の上部を約 10 ピクセル超えたように見えます。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 JavaScriptを使用している理由は、CSSファイルにアクセスできないと思いますが、アクセスできる場合は、おそらくそれらを使用する必要があります。

于 2012-10-12T00:16:07.630 に答える