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

Question

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

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

http://bit. ly/axDQox

尝试单击框 1，然后单击框 5。您会注意到页面滚动到框 5 下面的一半。我花了几个小时才让滚动到展开的框正常工作，我jquery 并不是那么好，所以我们将非常感谢您的帮助。 :)

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

我从

Answer 1

这是因为 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 文档中的内容可以帮助您 - 特别是 队列/出队部分。

Answer 2

使用队列功能几乎可以工作。但是，当另一个盒子展开时，之前展开的盒子将不会恢复/关闭。我将此代码用于此页面：

.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()”函数，先前展开的框将关闭，但页面不会正确滚动到展开的框。它再滚动大约 100px。