Здравствуйте. Только начал изучать 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 разные функции? но выполнялись они одна за другой лишь по одному клику мыши
