Question

I have a div I’m trying to animate, I have it set up so it animates by changing the marginTop property. The only problem is when I animate it to marginTop: O it’s not flush with the top of the containing div and I’m not sure why. It’s a lot so it’s easier to view it in a jsfiddle, http://jsfiddle.net/loriensleafs/F3wjg/21/ and the animation is prompted by clicking on the publications text at the top.

The div in question is profile_850_HEADER, when it animates it looks like it goes about 10px past the top of the containing div, the jquery is:

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");
});
});

any help here would be great, I have no idea why this is happening.

Answer 1

It’s all a matter of what order things are in, the same reason you use document.ready() handlers. Try moving your height calculation (var staff_CONTAINER_850_ht = $('#staff_CONTAINER_850').height();) to after you’ve inserted all of your CSS:

Demo: http://jsfiddle.net/SO_AMK/vQz3t/

P.S. I reordered your code and put the CSS in a function so that it gets run first. I also put some “tips” in.

P.S.S. I assume you don’t have access to any CSS files which is why you’re using JavaScript, but, if you do, you should probably use them.