Страница прыгает при клике на ссылку

При клике по ссылке у меня один див скрывается, а вместо него появляется другой.
После того как убирается первый див браузер думает что высота экрана уменьшилась и происходит скачек вверх, а то что появился новый див и нужно учесть его высоту - он не видит.
Как можно избавиться от такого скачка?
видео - nsvb.ru/projects/2012-09-17_1250.swf

<a href="#area_1" class="show_area">Link 1</a>

<a href="#area_2" class="show_area">Link 2</a>


<div class="area" id="area_1">

<button class="close">&times;</button>

<iframe src="http://site.ru" width="98%" height="300"></iframe>

</div>

<div class="area" id="area_2">

<button class="close">&times;</button>

<iframe src="http://site1.ru" width="98%" height="300"></iframe>

</div>


<style>

.area {

min-height: 20px;

padding: 20px;

margin-bottom: 20px;

background-color: #FFFFFF;

border: 1px solid #e3e3e3;

display: none;

}

</style>


<script>

$('.show_area').click(function() {

 if(!$(this).parents('.disabled-block').length) {

$($(this).attr('href') + '').stop(true,true).slideDown(300);

}

$('.area').not($(this).attr('href') + '').hide();

return false;

});

</script>

Возможно, нужно задать высоту родительскому блоку, где находятся скрываемые и открываемые по клику блоки, а самим этим блокам задать position:absolute;
Но надо смотреть конкретно, как это выглядит в браузере.

Можно попробовать одновременно одному div`у делать slideDown, другому - slideUp

Цитата ("radar0080"):

Возможно, нужно задать высоту родительскому блоку

Фишка в том что этих дивов может и не быть, и если задать высоту получится большое пустое место когда дивов не будет.



Цитата ("Jekyll"):

Можно попробовать одновременно одному div`у делать slideDown, другому - slideUp

Так вроде это и делается

Цитата ("Hungry_Hunter"):

фишка в том что этих дивов может и не быть, и если задать высоту получится большое пустое место когда дивов не будет.

Это тоже решается условием, типа такого:

if($('.класс исчезающего/появляющегося блока').length) //проверка на его наличие

{$('.класс исчезающего/появляющегося блока').parent().css('height',высота)}

.parent()

может быть несколько подряд, типа

.parent().parent()

если нужно задать высоту не прямому родителю, а родителю родителя, например.

Пробуй что то типа такого

<div class="area" id="areas_container">

<div class="area" id="area_1">

<button class="close">&times;</button>

<iframe src="http://site.ru" width="98%" height="300"></iframe>

</div>

<div class="area" id="area_2">

<button class="close">&times;</button>

<iframe src="http://site1.ru" width="98%" height="300"></iframe>

</div>
</div>

Для родительского элемента можно создать другой класс. Там возможно

 padding: 20px;

margin-bottom: 20px;

и другие свойства нужно будет переписать.

Ещё вариант поменять очередь скрытия/появления этих блоков:

<script>

$('.area').not($(this).attr('href')).hide();

$('.show_area').click(function() {

if(!$(this).parents('.disabled-block').length) {

$($(this).attr('href')).stop(true,true).slideDown(300);

}

return false;

});

</script>

Т.е. вначале происходит открывание нового блока, а затем скрытие старого. Браузер всё правильно должен посчитать при этом.
P.S. Соглашусь с nehovaysyatopol пустые кавычки вряд ли нужны.

Цитата ("radar0080"):

Т.е. вначале происходит открывание нового блока, а затем скрытие старого. Браузер всё правильно должен посчитать при этом.

Пробовал, не помогло.

Тогда поменять анимацию скрытия/открытия, например вместо

slideDown(300)

что-то другое, типа:

.animate({'opacity',0},300, function(){$(this).css('visibility','hidden')}) //для скрытия

.css('visibility','visible').animate({'opacity',1},300) //для открытия

тогда сам элемент останется со своими габаритами (но будет скрыт), и браузер будет с его размерами считаться

И ещё вариант, если не отказываться от прежней анимации:

<script>

$('.show_area').click(function() {

if(!$(this).parents('.disabled-block').length) {

$($(this).attr('href') + '').stop(true,true).slideDown(300);

}

setTimeout(function(){$('.area').not($(this).attr('href') + '').hide();},100) //небольшая задержка скрытия, на 0,1сек, чтобы браузер успел сообразить, что добавился новый блок

return false;

});

</script>

Всем, спасибо огромное, получилось!!!

А каким способом, если не секрет?

Вместо

$('.area').not($(this).attr('href') + '').hide();

сделал

$('.area').not($(this).attr('href')).slideUp(300);

Все гениальное просто

Браво! Гениально! Долго придумывали такое решение?

Да, два дня ушло на исправление