jquery - 滚动到展开的 DIV 问题和展开框中的链接

Question

我正在为我的新投资组合网站编写代码，并且正在使用砖石来扩展网格布局。

我遇到了使其滚动到扩展 DIV 的代码问题。它并不总是滚动到 div .expanded 的上部...这是一个示例：

http://bit.ly/axDQox

尝试单击框 1，然后单击框 5。您会注意到页面滚动到框 5 下方的一半。我花了几个小时才让滚动到扩展框工作，我在 jquery 中并不是那么好，因此，我们将不胜感激。:)

另一件事是，如果您展开框 1 并单击链接，框 1 将关闭。

顺便说一下，我从这个线程中获得了示例 html/css 代码。

Answer 1

这是因为该scrollTo函数在动画完成之前被调用。出于这个原因，jQueryanimate函数有一个回调（实际上您已经在使用它）。

.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文档上的一些东西可以帮助你 - 特别是队列/出队部分。

Answer 2

It's almost working using the queue function. However, when another box expands, the previously expanded box won't restore/close. I'm using this code for this page:

.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');

If you notice the "next()" function is commented. If I uncomment the "next()" function, the previously expanded box closes but the page won't scroll correctly to the expanded box. It scrolls about 100px more.