Есть пачка div, при клике анимируется высота (раскрывается на величину окна) и выполняется скролл до выбранного элемента. На первый взгляд работает нормально, но при прокрутке блоки начинают раскрываться вверх. Вследствии чего блок раскрывается, но вот скролл выполняется до верхушки блока в сложенном состоянии.
Вот ссылка на демку:
http://irrodion.ru/portfolio/
кусок html:
<div id="pageWrap">
<?php
for($i = 1;$i <= 10;$i++)
{
echo '<div class="content" id="'.$i.'"></div>';
}
?>
</div>
javascript
:
$(document).ready(function()
{
$(".content").each(function()
{
var id = "#"+this.id;
if(id == "#1")
{
$(id).css({'height':'150px'});
}
});
//Собственно обработка клика
$(".content").click(function()
{
var id = "#"+this.id;
var selectedId = id;
openContent(id);
scrollToContent(id);
$(".content").each(function()
{
var id = "#"+this.id;
var height = $(id).height();
if(height > 150 && id != selectedId)
{
closeContent(id);
}
});
});
});
//Функции
function openContent(id)
{
var height = $(window).height();
$(id).animate({'height':height}, 500, 'swing');
$(id).css({'cursor':'default'});
}
function closeContent(id)
{
if(id == "#1")
{
height = "150px";
}else
{
height = "100px";
}
$(id).animate({'height':height}, 500, 'swing');
$(id).css({'cursor':'pointer'});
}
function scrollToContent(id)
{
$('html, body').animate({scrollTop:$(id).position().top}, 500, 'swing');
}
Конечно, можно запустить функцию scrollToContent в callback анимации, но тогда возникает пауза перед прокруткой, что нежелательно.
Искал на форумах, наших и буржуйских, похожей проблемы не нашел. Подозреваю что нужно отслеживать offset и каким-то образом прикрутить его значения к скроллу, но пока не хватает опыта. Заранее спасибо за помощь!
