JQuery动画不透明度bug

Question

好的，我正在制作2个圆形图像的位置和不透明度。这些圆圈从右边进入，然后放入徽标中，它也会渐渐消失。我的点数高于z-index，但当它们到达徽标时，它们会消失，然后突然出现在它们所属的位置。

您可以在此处看到示例输入代码：http://www.caillouette.com/bg_test8/index.html

我的jQuery看起来像这样：

$("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);
    // etc ...
});

谁能看到我做错了什么？我不希望徽标中的点消失，它们应该滑入并获得完全不透明度。

感谢。