Quicksand是一款基于jQuery的插件，能对页面上的元素进行重新排序及过滤，并且有非常不错的洗牌过渡动画效果，可以应用在很多项目中来增强用户体验。本文以实际项目应用来讲解Quicksand的使用。
Quicksand是一款基于jQuery的插件，能对页面上的元素进行重新排序及过滤，并且有非常不错的洗牌过渡动画效果，可以应用在很多项目中来增强用户体验。本文以实际项目应用来讲解Quicksand的使用。
XHTML结构由一个导航条和一个内容列表组成。在内容列表#list里，我给每个li都加了一个id属性，这个是为了方便Quicksand插件调用。
我给导航条#nav设置了选项卡风格，并设置选中状态#nav ul li.cur的样式。列表内容区也设置了每张图片的固定高度和宽度。
首先，复制列表区的内容:
然后，来实现选项卡风格，当点击导航时，给当前点击的项加上选中的样式，同时其他项移除选中状态的样式：
接着，继续在单击时间里，获取当前点击选项的ID，通过判断ID值，获取数据源$source，最后调用quicksand插件。完整的代码如下：
Quicksand插件提供了几个参数可配置： duration：过渡动画的时间，以毫秒为单位。 attribute：关联数据的属性，本例设置为id。 easing：动画缓冲方式。
还有一个方法enhancement：function(c) {}可以自定义函数调用。
顺便提一下，IE6下没有过渡动画效果，IE7+，以及其他高级浏览器均测试通过。
以上所述就是本文的全部内容了，希望大家能够喜欢。
原文链接：https://www.f2er.com/jquery/54526.html