Question

我正在研究新投资组合网站的代码，我正在使用砌体来扩展网格布局。

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

尝试单击框1，然后单击框5.您将注意到页面滚动到框5下方的中间。我需要花费数小时才能使滚动扩展框工作，我真的不是那么好在jquery，所以帮助真的很感激。：）

另一件事，如果你展开方框1并点击链接，方框1将关闭。

顺便说一句，我从this thread获得了示例html / css代码。

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文档中的某些内容可以帮助您 - 特别是queue/dequeue部分。

Answer 2

它几乎使用队列功能。但是，当另一个框展开时，先前展开的框将不会恢复/关闭。我在this页面使用此代码：

.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。

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

2 个答案: