0

それで、兄弟のレストランのウェブサイトで石積みグリッドを使用しています。私が求めているのは、ページが読み込まれ、コンテナがスムーズにスライドし、画像が 1 つずつフェードインするときです。

ここで見ることができます

これが私の現在のコードです：

<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>
4

1 に答える 1

0

jQueryを使用できます.load()

何かのようなもの：

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

ただし、API を見てください。

于 2013-01-22T07:24:21.020 に答える