fadeIn и z-index

[Hoax]

В общем проблема такая, надо чтобы при нажатии на ссылку меню, текст которые есть ниже (#kv2), плавно исчезнул, и появился другой блок (#kv3). Это получается да, но вот когда появляется 2-ой блок он вначале появлялся ниже первого, пока 1-ой блок не исчезнет, затем вставал на его место. Чтобы все было на одном уровне я воспользовался z-index, но тут тоже проблема, вначале первый блок исчезает, потом появляется второй на ЕГО же место как я и хотел, но через секунду он встает выше там где не надо на 102 px выше.

Конечно это понятно ведь, для того чтоб положить один блок на другой у меня стоит top: -102px; Но как же быть, я неделю изучаю Jquery и ниче не знаю(, помогите как сделать, чтобы 2-ой блок норм появлялся и оставался на том же месте где и 1-ый блок.

Вот скрины как сейчас у меня.

1 блок до нажатия http://s59.radikal.ru/i165/1105/85/9d7f0c84aa90.png

2 блок после нажатия http://s50.radikal.ru/i128/1105/e2/c2926d65efe5.png

html

<div id="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Бонус</a></li>
<li><a class="go" href="#">О нас</a></li>
</ul>
</div>
<div id="kv2">текст текс текс текст текст текст текст текст 

текс текс текст текст текст текст текст.</div>
<div id="kv3">пкепрпер</di

css

#kv2 {width:200px;height:200px;left:800px;border:1px solid 

#fff;top:100px;}

#kv3 {width:200px;height:200px;
left:800px;border:1px solid #fff;top:-102px;display:none;}

#kv2 {position:relative;}
#kv3 {position:relative;}
#kv2 {z-index:2;}
#kv3 {z-index:1;}

Jquery

$(document).ready (function(){
$('a').each(function(){
$(this).animate ({opacity: '0.5'});
$(this).mouseover (function () {
$(this).animate ({opacity: '1.0', marginLeft: '10px'}, 300);
});
$(this).mouseout (function () {
$(this).animate ({opacity: '0.5', marginLeft: '0px'}, 300);
});
});
});

$(document).ready (function(){
$('#kv2').each(function(){
$(this).animate ({opacity: '1'}); 
$('.go').click (function () {
$('#kv2').fadeOut ('slow')
$('#kv3').fadeIn('1000');
});
});
});

Edited May 8, 2011 by Hoax

[s0rr0w]

В общем проблема такая, ...

Проблема в том, что вы не хотите читать документацию

http://api.jquery.com/fadeIn/

.fadeIn( [ duration ], [ callback ] )

Второй параметр - функция-обработчик, которая вызывается после окончания анимации.

Засовываете туда показывание нужного блока

[Hoax]

спасибо

[Hoax]

Еще одна неполадка). В общем использую innerfade для расворения картинок как слайд-шоу. Но вот несмотря на стили где в указанном id всего слайда стоит width:320; height:240px; длина где-то на 200px больше. А если вообще размеры не указывать и ширина больше станет. Причем это заметно только когда вставляешь блок под слайдом. Сразу видишь что отступ вообще большой.

Вот скрин чтоб все было понятно —- http://s003.radikal.ru/i204/1105/c3/45743e2cd3f1.gif

html

<div id="slide">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
</div>

css

#slide {margin:53 0 0 

785px;width:320px;height:240px;border:1px solid #fff;}

js

$(document).ready (function(){
$('#menu a').each(function(){
$(this).animate ({opacity: '0.5'});
$(this).mouseover (function () {
$(this).animate ({opacity: '1.0', marginLeft: '10px'}, 300);
});
$(this).mouseout (function () {
$(this).animate ({opacity: '0.5', marginLeft: '0px'}, 300);
});
});
});

$(document).ready(function(){ 
$('#slide').innerfade({
animationtype: 'fade', 
speed: 2000, 
timeout: 5000, 
type: 'sequence', 
containerheight: '500px' });
});

Edited May 9, 2011 by Hoax

[Great Rash]

Проблема не в скрипте, а в верстке.

[Hoax]

Я тож так думаю, но конкретной верстки у мя нет, т.е. только частично, чтобы посмотреть как скрипт работает, ну так в чем тут проблема, весь нужный код выложил.

[s0rr0w]

Я тож так думаю, но конкретной верстки у мя нет, т.е. только частично, чтобы посмотреть как скрипт работает, ну так в чем тут проблема, весь нужный код выложил.

В ДНК.

Сказано же, в верстке проблема. Неправильная она. Открывайте FireBug и внимательно изучайте что вы видите перед собой.