Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Помогите пожалуйста новичку. (https://javascript.ru/forum/jquery/4232-pomogite-pozhalujjsta-novichku.html)

deepslam 04.07.2009 00:40

Помогите пожалуйста новичку.
 
Всем привет!

Делаю сайт на jQuery , совсем недавно знаком с этой библиотекой, в общем суть задачи в следующем:

Есть сайт , по бокам у него стрелочки, вверх , вниз , влево и вправо , соотв. нажимая вверх , сайт как бы уезжает вниз на 3 экрана и показывается другой раздел , в общем суть в том , что экраны ездят.

Я весь код написал , он работает во всех браузерах , кромее... правильно! IE! , вверх у меня экран съезжает , а вниз не возвращается , прыгает и все , потом белый экран ставновится , т.к. на том месте никаких элементов не прописано.

двигаю элементы так:

var last="";  
	var mode=0;                                   
	function goUp() {
		last="-=250%";
		mode=2;
	    $("div.block").animate({top: "+=250%"}, 1200);
        return false;
	}
	function goDown() {
		last="+=300%";
		mode=2;
	    $("div.block").animate({top: "-=300%"}, 1200);
        return false;
	}	
	function goLeft() {
		last="-=300%";
		mode=1;
	    $("div.block").animate({left: "+=300%"}, 1200);
        return false;
	}
	function goRight() {
		last="+=200%";
		mode=1;
	    $("div.block").animate({left: "-=200%"}, 1200);
        return false;
	}	
	function goBack() {
	 if (last!="" && mode>0) {
	 	//alert(last);
			if (mode==1)
			//äëÿ âîçâðàòà ïî x
				$("div.block").animate({left: last}, 1200);
			if (mode==2) 
			//äëÿ âîçâðàòà ïî y
				$("div.block").animate({top: last}, 1200);
			last="";
			mode=0;
	 }
	}


Кто поможет? Что я делаю не так , в Safari , Opera , Firefox и Google Chrome все ровно , работает как нужно )

deepslam 04.07.2009 00:52

Да , стили такие:

* {
margin:0px;
padding:0px;
}
html, body {
	margin:0;
	padding:0;
	border:0;
	height:100%;
	border-collapse: collapse;
	font-family: Tahoma , Helvetica , Sans serif;
	font-size: 12px;
	color:#000000;
	overflow:hidden;
}

a {
	color:#5C2E04;
	font-size:12px;
	font-family: Tahoma , Helvetica , Sans serif;
	text-decoration:underline;
}

a:hover {
	color:#261200;
	font-size:12px;
	font-family: Tahoma , Helvetica , Sans serif;
	text-decoration:underline;
}

/*classes*/
.block {
	width:100%;
	height:100%;
	position:absolute;
	z-index:99;
}
.imglink {
	cursor:pointer;
}
/*classes*/

/*id*/
#load {
	z-index:1000;
	width:100%;
	height:100%;
	text-align:center;
	background:#a8a8a8;
}
#about {
	width:2000px;
	height:250%;
	left:0;
	top:-250%;
	background:#683DFC url('../img/about.png') top repeat-x;
	position:absolute;
}
	#about_content {
		z-index:101;
		width:100%;
		height:100%/*ie*/;
		left:0;
		top:-250%;
		position:absolute;
	}
#portfolio {
	width:300%;
	height:1200px;
	left:-300%;
	background:url('../img/portfolio.png') no-repeat center;
	position:absolute;
}
	#portfolio_content {
		z-index:101;
		width:100%;
		height:100%;
		left:-300%;
		top:0;
		position:absolute;
	}
#index {
	left:50%;
	top:50%;
	width:2000px;
	height:1200px;
	margin-left:-1000px;
	margin-top:-600px;
	background:url('../img/index.png') no-repeat center;
	z-index:102;
	position:absolute;
}
	#index_content {
		z-index:103;
		top:0px;
		left:0px;
		position:absolute;
	}
#contacts {
	width:300%;
	height:1200px;
	left:100%;
	top:0px;
	background:#683DFC url('../img/contacts.png') repeat-y top right;
	position:absolute;
}
	#contacts_content {
		z-index:101;
		width:100%;
		height:100%;
		left:200%;
		top:0;
		position:absolute;
	}
#clients {
	width:2000px;
	height:400%;
	top:100%;
	background:#683DFC url('../img/clients.png') bottom repeat-x;
	position:absolute;
}
	#clients_content {
		z-index:101;
		width:100%;
		height:100%;
		left:0;
		top:300%;
		position:absolute;
	}
#controls {
	width:300px;
	height:300px;
	position:absolute;
	z-index:100;
}
/*id*/


На ВСЕХ div'ах стоит class="block" и соотв. его ID

x-yuri 04.07.2009 21:50

а откуда ты взял такой способ задания анимации: animate({top: "+=250%"}, 1200)?

deepslam 05.07.2009 16:18

С одного из учебных сайтов по jQuery )
А как будет правильно , подскажите пожалуйста ;-) ?

x-yuri 05.07.2009 20:31

сорри, не заметил, что можно и так
ну тогда аттач в топик архив со страничкой

deepslam 06.07.2009 15:29

Весь код пока не очень хочу светить , хочу разобраться сам.
Подскажите , а как еще делается такая анимация (движение объектов)? Я попробую сам и если не получится, то напишу здесь.

А если все выйдет , напишу в чем была проблема )

x-yuri 06.07.2009 18:01

Цитата:

Сообщение от deepslam
Весь код пока не очень хочу светить

сделай тестовый неработающий пример

Цитата:

а как еще делается такая анимация
руками, без jQuery

deepslam 11.07.2009 13:40

Вот ссылка - http://test.imagi-nation.ru

x-yuri 13.07.2009 13:20

постепенно упрощай страницу. В какой-то момент оно заработает и ты узнаешь из-за чего оно не работало (последнее изменение)

p.s. в опере можно с помощью колесика мышки попасть на верхний/нижний экраны

deepslam 13.07.2009 13:27

Окей, спасибо за совет )


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