Question

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

这是我目前的代码：

<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（）can be hit and miss。

jQuery Masonry Grid，淡入淡出＆amp;幻灯片动画

1 个答案: