jQuery砖石网格，淡入和幻灯片动画

Question

所以我在我兄弟的餐馆网站上使用了砖石网格。我正在寻找的是，当页面加载时，容器平滑地滑下，然后图像一个接一个地淡入。

You can see it here

下面是我当前的代码：

<script type="text/javascript">
  $(function(){

    var $container = $('#photo_collage');

    $('#container_home').slideDown(1000);

    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector: '.item',
        gutterWidth: 5,
        isAnimated: true
      });
      $container.animate({opacity: 1}, 700)
    });

  });
</script>

    <div id="container_home">

    <div id="photo_collage">

        <div class="item">
            <img src="images/collage/7.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/collage/3.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/hours_board.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/collage/2.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/collage/4.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/collage/5.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/collage/6.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/collage/1.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/collage/8.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/collage/9.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/collage/10.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/collage/11.jpg" alt="" />
        </div>

        <div class="clear"></div>

    </div><!-- END PHOTO COLLAGE -->
</div>

Answer 1

你可以使用jQuery的.load()

类似于：

$('#photo_collage').load(function() {
  $(this).slideDown('slow', function() {
    $('.item').fadeIn();  
  });;
});

但是，请看.load() can be hit and miss。