OK, I'm animating the position and opacity of 2 circle images. These circles come in from the right, then fit into the logo which also fades in. I have the dots at a higher z-index, but when they reach the logo, they disappear, then suddenly appear where they belong.

You can see the example here

my jQuery looks like this:
Code:
<script type="text/javascript">
	$("document").ready(function(){
$('#top-dot').animate({
marginLeft: '0px'}, 2000);


$('#bottom-dot').animate({
marginLeft: '0px'}, 1500);

$('#nav_line').animate({
marginLeft: '320px'}, 1500);

$('#logo').animate({opacity: 1}, 2000);
$('#top-nav').animate({
opacity: 1}, 2600);

Can anyone see what I'm doing wrong? I don't want the dots in the logo to disappear, they should slide in and gain full opacity.

thanks