с помощью .animate правильно переместить объект
Здравствуйте. Только начал изучать 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 разные функции? но выполнялись они одна за другой лишь по одному клику мыши |
В начале вы меняете ему свойство right а потом left, раз уж взялись за right, то его дальше и меняйте, то есть вместо
$("#three").animate({left:'100px'}, 1500); поставите $("#three").animate({right:'100px'}, 1500); |
Часовой пояс GMT +3, время: 17:11. |