[bfg1114]

Здравствуйте. Только начал изучать jquery.
И такая задача:
Есть три блока, идущие один за другим: One, Two, Three.
при нажатии на блок Three блок Two должен уехать вниз за границы экрана, а блок Three встать на его место. После этого эти оставшиеся два блока должны выровняться по середине страницы.

Все это сделать более-менее получилось с помощью .animate.
Но когда два элемента начинают выравниваться по середине, то элемент Three начинает движение из первоначального своего положения. не пойму, почему так происходит.
И еще вопрос, может как-то проще (главное - понятнее) можно отцентрировать эти элементы? не прибегая к конкретным величинам

Вот мой скрипт:

$(document).ready(function moveBottom(){

    $("#three").click(function(){ 
		window_height=$(window).height();
		$("html").css('overflow-y','hidden');
		
		$("#two").css('position','relative') /* нужна для сдвига элемента зачем-то... */
				 .animate({top:window_height}, {duration:1500});
				 
		$("#three").css('position','relative')
				   .animate({right:'210px'}, {duration:3000, complete:function(){
						$("#three").animate({left:'100px'}, 1500);
						$("#one").css('position','relative')
						.animate({left:'100px'}, 1500)
						;}
				   });	
    }); 
	
});

А вот сама страничка и css: http://jsfiddle.net/ysXhD/

И еще вопрос назрел. А если мне нужно, допустим, после всего что выше сделать затухание элемента? Вот такое:

$(document).ready(function (){

    $("#three").click(function opacity (){ 
		$("#one").animate( { opacity: 0 }, 2000 ) 
			     .animate( { opacity: 1 }, 0 )   
    }); 
	
});

Наверное, можно запихать это в еще один complete:function(), но будет выглядеть громоздко.
Можно ли как-то сделать, чтобы это были 2 разные функции? но выполнялись они одна за другой лишь по одному клику мыши