Помогите пожалуйста новичку.
Всем привет!
Делаю сайт на 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 все ровно , работает как нужно ) |
Да , стили такие:
* {
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 |
а откуда ты взял такой способ задания анимации: animate({top: "+=250%"}, 1200)?
|
С одного из учебных сайтов по jQuery )
А как будет правильно , подскажите пожалуйста ;-) ? |
сорри, не заметил, что можно и так
ну тогда аттач в топик архив со страничкой |
Весь код пока не очень хочу светить , хочу разобраться сам.
Подскажите , а как еще делается такая анимация (движение объектов)? Я попробую сам и если не получится, то напишу здесь. А если все выйдет , напишу в чем была проблема ) |
Цитата:
Цитата:
|
Вот ссылка - http://test.imagi-nation.ru
|
постепенно упрощай страницу. В какой-то момент оно заработает и ты узнаешь из-за чего оно не работало (последнее изменение)
p.s. в опере можно с помощью колесика мышки попасть на верхний/нижний экраны |
Окей, спасибо за совет )
|
Эхх, никак не решу проблему, но суть ее примерно понял:
Если left указывать не +=100% , -=100% например , а в пикселях , например +=100px , -=100px , то работает , но в IE нет анимации почему то (это уже другой вопрос). Теперь самое главное , вот совсем урезанная версия: http://test.imagi-nation.ru/test2.htm Вправо уезжает все замечательно , далее же позиции сбрасываются на определенные в CSS (видимо) и все это дело едет влево (обратно) , это некорректное поведение IE , в других браузерах позиция left вычитается от текущей (на которую еще "переехали" объекты) Как сделать , чтобы IE также возвращал объекты обратно , без сбрасывания их координат? Код , отвечающий за перемещение вправо:
$("div.block").animate({left: "-=300%"}, 1200);
Код, отвечающий , за перемещение назад:
$("div.block").animate({left: "+=300%"}, 1200);
Надеюсь понятно объяснил ))) Очень хочется уже сделать , чтобы работало все. |
это баг jQuery
попробуй заменить
if ( !/^\d+(px)?$/i.test( ret ) && /^\d/.test( ret ) ) {
на
if ( !/^-?\d+(px)?$/i.test( ret ) && /^-?\d/.test( ret ) ) {
|
Дружище!
Спасибо тебе огромное! Оно работает! Осталось пару косяков, но это уже мелочи и я сам поправлю! Блин, какое же облегчение , когда проблема решена, тем более когда не знаешь еще толком библиотеку и думаешь , что это ты что то неправильно делаешь. Спасибо огромное! Удачи тебе ;-) |
учись отлаживать (хоть и чужие библиотеки). Иногда имеет смысл поискать на багтрекере - может у кого были подобные проблемы
|
Да отлаживать я умею , firebug стоит , не перый год уже с сайтами и программированием, а вот по поиску вводил , но с английским у меня не очень и все не то находил.
|
Цитата:
|
| Часовой пояс GMT +3, время: 14:47. |