jquery - jQuery Masonry Grid、淡入和滑动动画

Question

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

在这里你可以看到它

这是我当前的代码：

<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();  
  });;
});

不过看看 API，.load()可能会被击中和错过。