title: Animating item size in Isotope: Why is first item wonky?
body: <p>I'm learning to use <a href="http://isotope.metafizzy.co/">Isotope</a> and came across the author's blog post about how to <a href="http://metafizzy.co/blog/isotope-animating-item-sizes/">animate item sizes</a>.</p>
  
  <p>I have implemented that for a project I am developing. It consists of three vertical columns. Each item is 196px x 70px. When you click an item, it will expand to 402px x 230px.</p>
  
  <p>All the items resize properly and cause Isotope to refresh the layout -- except the first item.</p>
  
  <p>Clicking the first item causes all the subsequent list items to  line up in just one vertical column -- even though there is plenty of room and the items should flow around the first one.</p>
  
  <p>Clicking any other item in the list results in the correct behavior. Only the first one is wonky. Can anyone see what might cause this?</p>
  
  <p>Here's my test case: <a href="http://joshrenaud.com/pd/testcase/testcase.html">http://joshrenaud.com/pd/testcase/testcase.html</a> </p>
  
  <p>The code that handles this resizing looks like this:</p>
  
  <pre><code>    $('.child').click(function(){
          var $this = $(this);
          if ($this.hasClass('big')) {
              tileStyle = { width: 196, height: 70};
          }
          else {
              tileStyle = { width: 402, height: 230};
          }
          $this.children().children('.childDate').toggle();
          $this.children().children('.childDesc').toggle();
          $this.toggleClass('big');
  
          $this.find('.child-content').stop().animate( tileStyle );
  
          $('#container').isotope( 'reLayout' )
  
      });
  </code></pre>