0

無限スクロールに関するこの指示に従って、ページ 2、3、4 などから新しいコンテンツを非表示にして、読み込みが終了してからアニメーション化することができました。今、私はこれらと同じ効果を達成したいと考えていますが、メインコンテンツでは、最初のページは何でしょう. 何か助けはありますか？私が使用しているコード:

<script>
    $(function(){
      var $container = $('#boxes');
      $container.imagesLoaded( function(){
        $container.isotope({
          itemSelector : '.box' 
        });
      });  
</script>

<script>
$('#boxes').isotope({ 
 // options
   itemSelector : '.box',
   layoutMode : 'masonry'
    masonry : {
          columnWidth : 325
        },
});
</script>

<script>
   $(function(){
             var $container = $('#boxes');
             $container.imagesLoaded(function(){
                 $container.isotope({
                     itemSelector: '.box'
                 });
             });
              $container.infinitescroll({
        navSelector  : '#navigation',   
        nextSelector : '#navigation a#next', 
        itemSelector : '.box',    

        loading: {
            finishedMsg: 'no more pages to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
                 }
             },
             function(newElements){ 
                 var $newElems = jQuery( newElements ).hide()
                 console.log('Elements Retrieved:');
                 var $newElems = $(newElements);
                 $container.imagesLoaded(function(){
                     $newElems.fadeIn(); // fade in when ready
           $container.isotope('appended', $newElems, function(){console.log('Appended');});
                 });
             });
         });

  </script>

そして、ここにブログがあります。前もって感謝します！

4

2 に答える 2

5

私が意味したのは-あなたのCSSにあなたが入れた

#container {
    display: none;
}

デフォルトで#containerを非表示にして、最初は表示されないようにします。次に、スクリプトに、

$container.show();

あなたがそれを見せたいポイントで; たとえば、最初のページのすべてが読み込まれたとき、または#containerを初めて.show（）したいときはいつでも。ここに簡単な例があります。

于 2012-10-16T17:29:22.440 に答える
0

hide() (つまり、display: none) を使用したソリューションの小さな欠点は、Isotope が非表示の要素をレイアウトしないため、レイアウトの前にこれを行う必要があることです。不快。より良い解決策は、可視性を非表示に設定してから、レイアウトを実行してから、可視性を表示して再度表示することです。これにより、コンテナーの境界線もすべての要素のサイズに設定されます。

于 2016-11-30T23:48:57.393 に答える