Isotope - animating item sizes

For http://stackoverflow.com/questions/5076458/need-help-reversing-a-function-reverting-an-animated-expansion-of-a-div

by johnnytrinh

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="container">
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
   <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
   ...

CSS

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  float: left;
  background: red;
}

.item.big {
  width: 170px;
  height: 110px;
}

.item-content {
  width: 50px;
  height: 50px;
  background: blue;
  opacity: 0.5;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;

}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

JavaScript

$(function(){
  
  
  var $container = $('#container');
  
  $container.isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: 60
    }
  })
  
  $('.item').click(function(){
    var $this = $(this),
        tileStyle = $this.hasClass('big') ? { width: 50, height: 50} : { width: 170, height: 110};
    $this.toggleClass('big');
    
    $this.find('.item-content').stop().animate( tileStyle );

    $container.isotope( 'reLayout' )
    
  });

});