[Synov_son]

Доброго времени суток. Ребята, помогите, пожалуйста. Делаю эффект загрузки. Выглядеть он должен так:
Строка. Из-за левого края вылетают точки (6 штук) по очереди друг за дружкой и останавливаются по центру(до того момента пока последняя не догонит остальных), а после вылетают за правый край, также, по очереди, но быстро. То бишь есть три позиции:
......| ...... |......
за экраном в центре за экраном
Но почему то они вылетают сразу все вместе... Подскажите, почему, пожалуйста.

<p id="dots">
        	<span id="1">&bull;</span>
            <span id="2">&bull;</span>
            <span id="3">&bull;</span>
            <span id="4">&bull;</span>
            <span id="5">&bull;</span>
            <span id="6">&bull;</span>
       </p>

<style>
#dots {
	overflow:hidden;
	text-align: center;
}
#dots span {
	position: relative;
	left: -100%;
}
</style>

for(var i=6;i>=1;i--){
				$('#dots>#'+i).animate({left:i/3+'%'},500,'easeOutQuart').delay(500);
			}

Пробовал также setTimeOut. Тоже самое. Может это быть из-за того. что данный js-код у меня выполняется как callback/complete функция ?
Жду, заранее благодарю.