jQuery Quicksand plugin

Quicksand. Reorder and filter items with a nice shuffling animation.

by neoswf

HTML

<script src="http://razorjack.net/quicksand/scripts/assets/jquery-1.4.1-and-plugins.min.js"></script>
<link rel="stylesheet" href="http://razorjack.net/quicksand/styles/main.css">
<div class="demo">
          <p><a class="coldbutton" href="#dummy">More cold!</a></p>
          <p><a class="warmbutton" href="#dummy">More warmth!</a></p>
          <ul class="colors all">
            <li id="c463033" style="background: #463033">a</li>
            <li id="c77343d" style="background: #77343d"></li>
            <li id="ce83f2f" style="background: #e83f2f"></li>
            <li id="cffc223" style="background: #ffc223"></li>
            <li id="cffdb59" style="background: #ffdb59"></li>
            <li id="c788b6f" style="background: #788b6f"></li>
            <li id="c486a5e" style="background: #486a5e"></li>
            <li id="c289539" style="background: #289539"></li>
            <li id="c174876" style="background: #174876"></li>
          </ul>
          <ul class="colors warm">
            <li id="bvbvbvb" style="background: #62164e">b</li>
            <li id="cvcvcvc" style="background: #86286e"></li>
            <li id="zxzxzxz" style="background: #da79c2"></li>
            <li id="sasasas" style="background: #e83f2f"></li>
            <li id="qwqwqwq" style="background: #f39079"></li>
            <li id="ewewewe" style="background: #ffc223"></li>
            <li id="dsdsdsd" style="background: #ffdb59"></li>
            <li id="bvbvbvb" style="background: #f2c478"></li>
          </ul>
</div>

CSS

.demo .colors {
  overflow: hidden;
  margin: 20px 0;
  padding-left: 55px;
}

.demo .colors li {
  display: block;
  width: 96px;
  height: 96px;
  margin: 10px;
  float: left;
  border: 16px solid;
}

.demo .warm {
  display: none;
}

JavaScript

$(function() {
    $('.coldbutton').click(function(e) {
      $('.warm').quicksand( $('ul.all li'), {
        duration: 3000,
        attribute: 'id',
        easing: 'easeInOutQuad'
      });
      e.preventDefault();
    });
     $('.warmbutton').click(function(e) {
      $('.all').quicksand( $('ul.warm li'), {
        duration: 3000,
        attribute: 'id',
        easing: 'easeInOutQuad'
      });
      e.preventDefault();
    });
  });