Javascript animation with

Javascript animation with

I'm attempting to get certain items to animate from one location to a new
one on a click of the appropriate button. Even though I used fixed
positions and have javascript to set the location before the animation,
things still go off the page before to the end point.
Firefox and Webkit browsers have had different errors on and off and I
can't find a solid solution to this, could anyone help me out with this?
$(function(){
$("#nav li").click(function() {
$("#nav").css({
'left' : $(this).position().left + 'px',
'top' : $(this).position().top + 'px'
})
.animate({
'margin-top' : '-175px',
'margin-left' : '0px',
'left' : '10px',
'top' : '50%',
'height' : '370px',
'width' : '70px'
}, 500, 'swing');
$("#name").css({
'top': $(this).position().top + 'px'
})
.animate({
'top' : '100px'
} , 500, 'swing');
});
$("#nav li#a").click(function() {
$(".set#a").animate({
'opacity' : '1' ,
'top' : '50%',
'margin-top' : '-200px'
}, 500, 'swing');
});
});
http://coreytegeler.com/jg/