title: jQuery Masonry Grid, Fade In & Slide Animations
body: <p>So I am using the masonry grid on my Brother's restaurant website. What I am seeking is for when the page loads, the container smoothly slides down, and then the images fade in one by one.</p>
  
  <p><a href="http://droddle.com/taconano/" rel="nofollow">You can see it here</a></p>
  
  <p>Here is my current code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(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)
      });
  
    });
  &lt;/script&gt;
  
      &lt;div id="container_home"&gt;
  
      &lt;div id="photo_collage"&gt;
  
          &lt;div class="item"&gt;
              &lt;img src="images/collage/7.jpg" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="images/collage/3.jpg" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="images/hours_board.jpg" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="images/collage/2.jpg" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="images/collage/4.jpg" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="images/collage/5.jpg" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="images/collage/6.jpg" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="images/collage/1.jpg" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="images/collage/8.jpg" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="images/collage/9.jpg" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="images/collage/10.jpg" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
              &lt;img src="images/collage/11.jpg" alt="" /&gt;
          &lt;/div&gt;
  
          &lt;div class="clear"&gt;&lt;/div&gt;
  
      &lt;/div&gt;&lt;!-- END PHOTO COLLAGE --&gt;
  &lt;/div&gt;
  </code></pre>