Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.05.2013, 07:34
Новичок на форуме
Отправить личное сообщение для malgeorge Посмотреть профиль Найти все сообщения от malgeorge
 
Регистрация: 13.03.2013
Сообщений: 5

Анимация высоты элемента, проблема со скроллингом
Есть пачка 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 и каким-то образом прикрутить его значения к скроллу, но пока не хватает опыта. Заранее спасибо за помощь!
Ответить с цитированием
  #2 (permalink)  
Старый 15.05.2013, 08:44
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

По сути тебе нужно скроллить к position().top() - (previousBlock.height() - previousBlock.collapsedHeight())


collapsedHeight - такой функции нет, вместо нее ты подставляешь свои 100 | 150 пикселей.
Ответить с цитированием
  #3 (permalink)  
Старый 16.05.2013, 07:57
Новичок на форуме
Отправить личное сообщение для malgeorge Посмотреть профиль Найти все сообщения от malgeorge
 
Регистрация: 13.03.2013
Сообщений: 5

function scrollToContent(id)
{
var height = $(window).height();
$('html, body').animate({scrollTop:$(id).position().top-(height-100)}, 500, 'swing');
}

Если сделать так, то получается всё в точности наоборот. Теперь если блок раскрывается вверх - всё в порядке, вниз - скорлл улетает вверх.
Ответить с цитированием
  #4 (permalink)  
Старый 16.05.2013, 08:20
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Этот код не имеет ничего общего с моим комментарием
Ответить с цитированием
  #5 (permalink)  
Старый 16.05.2013, 09:34
Новичок на форуме
Отправить личное сообщение для malgeorge Посмотреть профиль Найти все сообщения от malgeorge
 
Регистрация: 13.03.2013
Сообщений: 5

Допёр, все заработало как надо, но иногда все равно пролетает вниз, хм. Спасибо большое!

Последний раз редактировалось malgeorge, 16.05.2013 в 09:56.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Анимация. Возникла проблема с Анимацией в JS( stanislav96 Элементы интерфейса 5 30.03.2013 09:39
Проблема с выборкой нужного элемента для исполнения frolvict jQuery 3 04.08.2011 00:14
Проблема при передаче в jquery переменной c id элемента lectrouser jQuery 2 02.05.2011 16:51
проблема с вычислением высоты элемента random13 Javascript под браузер 8 15.02.2011 14:31
Высота элемента в зависимости от высоты рядом стоящего why.not? (X)HTML/CSS 5 18.05.2010 14:37