Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   с помощью .animate правильно переместить объект (https://javascript.ru/forum/jquery/31662-s-pomoshhyu-animate-pravilno-peremestit-obekt.html)

bfg1114 16.09.2012 13:49

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

walik 17.09.2012 17:32

В начале вы меняете ему свойство right а потом left, раз уж взялись за right, то его дальше и меняйте, то есть вместо
$("#three").animate({left:'100px'}, 1500);

поставите
$("#three").animate({right:'100px'}, 1500);


Часовой пояс GMT +3, время: 17:11.