JQuery插件Quicksand实现超炫的动画洗牌效果
Quicksand是一款基于jQuery的插件，能对页面上的元素进行重新排序及过滤，并且有非常不错的洗牌过渡动画效果，可以应用在很多项目中来增强用户体验。本文以实际项目应用来讲解Quicksand的使用。
XHTML
<divid="nav"> <ul> <liid="all"class="cur">所有功能模块</li> <liid="app">应用程序</li> <liid="sys">系统管理</li> </ul> </div> <ulid="list"class="image-grid"> <liid="id-1"class="app"> <imgsrc="images/birth.gif"width="80"height="60"alt=""/> <strong>生日祝福</strong></li> <liid="id-2"class="app"> <imgsrc="images/festival.gif"width="80"height="60"alt=""/> <strong>节日祝福</strong></li> <liid="id-3"class="sys"> <imgsrc="images/jifen.gif"width="80"height="60"alt=""/> <strong>积分管理</strong></li> ....N多li </ul>
XHTML结构由一个导航条和一个内容列表组成。在内容列表#list里，我给每个li都加了一个id属性，这个是为了方便Quicksand插件调用。
CSS
#nav{height:36px;margin:10pxauto;border-bottom:1pxsolid#36c}
#navul{list-style:none;padding-left:120px}
#navulli{float:left;height:34px;line-height:34px;margin-left:6px;
padding:0px12px;border-left:1pxsolid#d3d3d3;border-right:1pxsolid#d3d3d3;
border-top:1pxsolid#d3d3d3;background:#f7f7f7;cursor:pointer}
#navulli.cur{height:35px;background:#36c;color:#fff}
.image-grid{zoom:1}
.image-gridli{width:82px;height:100px;margin:20px0035px;float:left;
text-align:center;line-height:18px;color:#686f74;overflow:hidden;}
.image-gridliimg,.image-gridlistrong{display:block;}
我给导航条#nav设置了选项卡风格，并设置选中状态#navulli.cur的样式。列表内容区也设置了每张图片的固定高度和宽度。
jQuery
首先，复制列表区的内容:
var$data=$("#list").clone();
然后，来实现选项卡风格，当点击导航时，给当前点击的项加上选中的样式，同时其他项移除选中状态的样式：
$("#navulli").click(function(){
$(this).addClass("cur");
$(this).siblings().removeClass("cur");
});
接着，继续在单击时间里，获取当前点击选项的ID，通过判断ID值，获取数据源$source，最后调用quicksand插件。完整的代码如下：
$("#navulli").click(function(){
$(this).addClass("cur");
$(this).siblings().removeClass("cur");
varid=$(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+，以及其他高级浏览器均测试通过。
以上所述就是本文的全部内容了，希望大家能够喜欢。