HTML ulをシームレスに入れ替えるQuicksand

Reorder and filter items with a nice shuffling animation.

Ajaxian » Quicksand: transition and filtering effectにおいてjQueryプラグインのひとつjQuery Quicksand pluginが紹介されている。ul要素で用意したいくつかのリストをシームレスに入れ替えるためのプラグインで、スムーズなアニメーションを簡単に実装できる。

jQuery Quicksand pluginのトップページがQuicksandのサンプルにもなっており、上部にあるボタンを押すことでアイコンがスムーズに移動することを確認できる。下記の3つの図がそれぞれシームレスにアニメーションしながら入れ替わるように動作する。ソースコードを見るとアイコンはul要素で用意されており、それをQuicksand経由でアニメーションさせていることがわかる。


Quicksand動作例	Quicksand動作例


Quicksand動作例	Quicksandソースコード例

Quicksandを試すためのもっとも簡単なサンプルを利用しやすいようにまとめたものを次に掲載しておく。ダウンロードしたQuicksand 1.2のソースコードをscripts/jquery.quicksand.min.jsにコピーしておけば利用できる。

<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quicksand Demo</title>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.quicksand.min.js" type="text/javascript"></script>
<style type="text/css"></style>
</head>
<body>
<p><a class="button" href="#dummy">Apples to Oranges</a></p>
<ul id="source">
  <li data-id="anto">Antonovka</li>
  <li data-id="jonat">Jonathan</li>
  <li data-id="mac">McIntosh</li>
</ul>
<ul id="destination" style="display: none">
  <li data-id="blood">Blood orange</li>
  <li data-id="pers">Persian orange</li>
  <li data-id="valen">Valencia orange</li>
</ul>
<script type="text/javascript">
$(function() {
  $('.button').click(function(e) {
    $('#source').quicksand( $('#destination li') );
    e.preventDefault();
  });
});
</script>
</body>
</html>