0

私は新しいポートフォリオ サイトのコードに取り組んでおり、拡大するグリッド レイアウトに組積造を使用しています。

展開された DIV にスクロールするコードに問題があります。常に div .expanded の上部までスクロールするとは限りません。サンプルは次のとおりです。

http://bit.ly/axDQox

ボックス 1 をクリックしてからボックス 5 をクリックしてみてください。ページがボックス 5 の半分下までスクロールすることに気付くでしょう。助けていただければ幸いです。:)

ボックス 1 を展開してリンクをクリックすると、ボックス 1 が閉じます。

ところで、このスレッドからサンプルの html/css コードを取得しました。

4

2 に答える 2

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のドキュメントの何か、特にキュー/デキューの部分が役に立ちます。

于 2010-08-27T22:04:21.430 に答える
0

キュー機能を使ってほぼ動いています。ただし、別のボックスが展開されると、以前に展開されたボックスは復元/閉じられません。このページには次のコードを使用しています。

.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 以上スクロールします。

于 2010-08-28T08:36:01.653 に答える