Прокрутка к расширенной проблеме DIV и ссылки в расширенном окне - PullRequest
Новая
       0

Прокрутка к расширенной проблеме DIV и ссылки в расширенном окне

0 голосов
/ 28 августа 2010

Я работаю над кодом для моего нового сайта портфолио и использую кладку для расширяющегося макета сетки.

У меня проблемы с кодом, который заставляет его переходить к расширенному DIV.Он не всегда прокручивается до верхней части div .expanded ... Вот пример:

http://bit.ly/axDQox

Попробуйте щелкнуть поле 1, а затем поле 5. Вы будетеобратите внимание, что страница прокручивается до середины ниже блока 5. Мне потребовались часы, чтобы заставить работать окно расширенной прокрутки, я не очень хорош в jquery, поэтому помощь будет очень полезна.:)

Другое дело, если вы развернете окно 1 и нажмете на ссылку, поле закроется.

Я получил образец кода html / css из этой темы путь.

Ответы [ 2 ]

1 голос
/ 28 августа 2010

Это потому, что функция scrollTo вызывается до завершения анимации. Функция jQuery animate имеет функцию обратного вызова именно по этой причине (вы фактически уже используете ее). 

.animate({
  width: size[0],
  height: size[1]
  }, function(){
  // show hidden content when box has expanded completely
  $(this).find('.expandable').show('slow');
  $(this).find('.hideable').hide('slow');
  $('#grid').masonry();
  // call scrollTo here
});

Я только что понял, что у вас есть другие анимации одновременно, так что это не будет работать полностью. Может быть, что-то в документации jQuery Effects может вам помочь - в частности очередь / очередь частей.

0 голосов
/ 28 августа 2010

Это почти работает с использованием функции очереди.Однако, когда расширяется другой блок, ранее расширенный блок не будет восстанавливаться / закрываться.Я использую этот код для этой страницы: 

.animate({
 width: size[0],
 height: size[1]
 }, function(){
 // show hidden content when box has expanded completely
 $(this).find('.expandable').show('slow');
 $(this).find('.hideable').hide('slow');
 $('#grid').masonry();
 // scrollTo here
 $(this).queue(function(){
 var yloc = $('.expanded').offset().top;
 $(document).scrollTo( $('.expanded') ,600 );
 //next();
 }
 });     
 });
restoreBoxes();
$(this).addClass('expanded');

Если вы заметили, что прокомментирована функция "next ()".Если я раскомментирую функцию «next ()», ранее раскрытое окно закрывается, но страница не будет правильно прокручиваться в расширенное поле.Прокрутка примерно на 100 пикселей больше.

...