Quicksand这是一个非常不错的 jQuery 插件，用于实现动画洗牌效果，十分的实用，有需要的小伙伴可以参考下。

　　Quicksand是一款基于jQuery的插件，能对页面上的元素进行重新排序及过滤，并且有非常不错的洗牌过渡动画效果，可以应用在很多项目中来增强用户体验。本文以实际项目应用来讲解Quicksand的使用。

　　XHTML

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div id="nav">    <ul>     <li id="all" class="cur">所有功能模块</li>     <li id="app">应用程序</li>     <li id="sys">系统管理</li>    </ul>  </div>  <ul id="list" class="image-grid">    <li id="id-1" class="app">     <img src="images/birth.gif" width="80" height="60" alt="" />     <strong>生日祝福</strong></li>    <li id="id-2" class="app">     <img src="images/festival.gif" width="80" height="60" alt="" />     <strong>节日祝福</strong></li>    <li id="id-3" class="sys">     <img src="images/jifen.gif" width="80" height="60" alt="" />     <strong>积分管理</strong></li>    ....N多li  </ul>

　　XHTML结构由一个导航条和一个内容列表组成。在内容列表#list里，我给每个li都加了一个id属性，这个是为了方便Quicksand插件调用。

　　CSS

　　?

1 2 3 4 5 6 7 8 9 10 #nav{height:36px; margin:10px auto; border-bottom:1px solid #36c}  #nav ul{list-style:none; padding-left:120px}  #nav ul li{float:left; height:34px; line-height:34px; margin-left:6px;  padding:0px 12px; border-left:1px solid #d3d3d3; border-right:1px solid #d3d3d3;   border-top:1px solid #d3d3d3; background:#f7f7f7; cursor:pointer}  #nav ul li.cur{height:35px; background:#36c; color:#fff}  .image-grid{zoom:1}  .image-grid li{width: 82px; height:100px; margin: 20px 0 0 35px; float:left;   text-align: center; line-height:18px;color: #686f74;overflow:hidden;}  .image-grid li img,.image-grid li strong{display:block;}

　　我给导航条#nav设置了选项卡风格，并设置选中状态#nav ul li.cur的样式。列表内容区也设置了每张图片的固定高度和宽度。

　　jQuery

　　首先，复制列表区的内容:

　　?

1 var $data=$("#list").clone();

　　然后，来实现选项卡风格，当点击导航时，给当前点击的项加上选中的样式，同时其他项移除选中状态的样式：

　　?

1 2 3 4 $("#nav ul li").click(function(){    $(this).addClass("cur");    $(this).siblings().removeClass("cur");  });

　　接着，继续在单击时间里，获取当前点击选项的ID，通过判断ID值，获取数据源$source，最后调用quicksand插件。完整的代码如下：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $("#nav ul li").click(function(){    $(this).addClass("cur");    $(this).siblings().removeClass("cur");    var id = $(this).attr("id");      if(id=="all"){        var $source=$data.find("li");      }else{        var $source=$data.find("li[class="+id+"]");      }      $("#list").quicksand($source,{        duration: 1000,        attribute: 'id',        easing: 'swing'      });    });  });

　　Quicksand插件提供了几个参数可配置：

　　duration：过渡动画的时间，以毫秒为单位。

　　attribute：关联数据的属性，本例设置为id。

　　easing：动画缓冲方式。

　　还有一个方法enhancement：function(c) {}可以自定义函数调用。

　　顺便提一下，IE6下没有过渡动画效果，IE7+，以及其他高级浏览器均测试通过。

　　以上所述就是本文的全部内容了，希望大家能够喜欢。