Isotope - animating item sizes

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

by janetyc

HTML

<div id="container">
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div class="tile"></div>
    </div>
    <div class="tile-holder">
        <div...

CSS

.tile-holder {
    width: 50px;
    height: 50px;
    background: red;
    margin: 5px;
    float: left;
}

.tile-holder.big {
    width: 170px;
    height: 110px;
}

.tile {
    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

/**
 * Isotope v1.0.110220 - always sortable mod
 * An exquisite jQuery plugin for magical layouts
 * http://isotope.metafizzy.co
 *
 * Commercial use requires one-time license fee
 * http://metafizzy.co/#licenses
 *
 * Copyright 2011 David DeSandro / Metafizzy
 */

(function(window, $, undefined) {

    // ========================= getStyleProperty by kangax ===============================
    // http://perfectionkills.com/feature-testing-css-properties/
    var getStyleProperty = (function() {

        var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'Ms'];
        var _cache = {};

        function getStyleProperty(propName, element) {
            element = element || document.documentElement;
            var style = element.style,
                prefixed, uPropName, i, l;

            // check cache only when no element is given
            if (arguments.length === 1 && typeof _cache[propName] === 'string') {
                return _cache[propName];
            }
            // test standard property first
            if (typeof style[propName] === 'string') {
                return (_cache[propName] = propName);
            }

            // capitalize
            uPropName = propName.charAt(0).toUpperCase() + propName.slice(1);

            // test vendor specific properties
            for (i = 0, l = prefixes.length; i < l; i++) {
                prefixed = prefixes[i] + uPropName;
                if (typeof style[prefixed] === 'string') {
                    return (_cache[propName] = prefixed);
                }
            }
        }

        return getStyleProperty;
    }());

    // ========================= miniModernizr ===============================
    // <3<3<3 and thanks to Faruk and Paul for doing the heavy lifting
/*!
   * Modernizr v1.6ish: miniModernizr for Isotope
   * http://www.modernizr.com
   *
   * Developed by: 
   * - Faruk Ates  http://farukat.es/
   * - Paul Irish  http://paulirish.com/
   *
   * Copyright (c) 2009-2010
   *...