$(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' ) }); });
<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"> <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>
.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; }