Javascript 同位素-第一次加载时隐藏元素

按照关于的说明，我能够从第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>

$（函数（）{
var$container=$（“#box”）；
$container.imagesLoaded（函数（）{
$container.com({
项目选择器：'.box'
});
});  
$（'#框'）。同位素（{
//选择权
itemSelector:“.box”，
布局模式：“砌体”
砌体：{
列宽：325
},
});
$（函数（）{
var$container=$（“#box”）；
$container.imagesLoaded（函数（）{
$container.com({
项目选择器：'.box'
});
});
$container.infinites卷({
导航选择器：“#导航”，
下一个选择器：“#导航a#下一个”，
itemSelector:“.box”，
装载：{
FinishedMg:“没有更多页面要加载。”，
img:'http://i.imgur.com/qkKy8.gif'
}
},
函数（新元素）{
var$newElems=jQuery（newElements）.hide（）
log（'检索到的元素：'）；
var$newElems=$（新元素）；
$container.imagesLoaded（函数（）{
$newElems.fadeIn（）；//准备就绪后淡入
$container.同位素（'added'，$newElems，function（）{console.log（'added'）；}）；
});
});
});

---

这是。提前谢谢！

我的意思是-在你的CSS中，你把

#container {
    display: none;
}

默认情况下隐藏#容器，使其最初不会显示；然后，在脚本中，只需将

$container.show();

---

在您希望显示它的位置；例如，当第一页的所有内容都已加载时，或者在您希望的任何时候。第一次显示（）您的#容器。简单的示例。

我的意思是-在您的CSS中

#container {
    display: none;
}

默认情况下隐藏#容器，使其最初不会显示；然后，在脚本中，只需将

$container.show();

---

在您希望显示它的位置；例如，当第一页的所有内容都已加载时，或在您希望的任何时候。第一次显示（）您的#容器。简单示例。

使用hide（）解决方案的小缺点（即显示：无）这需要在布局之前发生，因为同位素不会布局隐藏的元素，所以你会在一瞬间看到最初的“混乱”，这让我感到不快。

---

更好的解决方案是设置可见性：隐藏，然后进行布局，然后使用可见性：可见再次显示。这也会将容器边框设置为所有元素的大小。

使用hide（）解决方案的小缺点（即显示：无）这需要在布局之前发生，因为同位素不会布局隐藏的元素，所以你会在一瞬间看到最初的“混乱”，这让我感到不快。

---

更好的解决方案是设置可见性：hidden，然后进行布局，然后使用可见性：visible再次显示。这也会将容器边框设置为所有元素的大小。

如果要隐藏最初加载的内容，只需隐藏（）您的容器或将其不透明度设置为0%，直到您想到的任何用户操作都会显示它和内容。@Systembolaget我已尝试使用

$（function（）{var$container=$（'#box'）.hide（）；$container.imagesLoaded（function（）{$container.fadeIn（））；}）；}）；

但它首先开始加载内容，然后隐藏它，然后淡入淡出如果要隐藏最初加载的内容，只需隐藏（）您的容器或将其不透明度设置为0%，直到您想到的任何用户操作都会显示它和内容。@Systembolaget我已尝试使用

$（function（）{var$container=$（'#box'）.hide（）；$container.imagesLoaded（function（）{$container.fadeIn（））；}）；}）；

但它首先开始加载内容，然后隐藏，然后淡入