Quicksand這是一個非常不錯的 jQuery 插件，用于實現動畫洗牌效果，十分的實用，有需要的小伙伴可以參考下。

Quicksand是一款基于jQuery的插件，能對頁面上的元素進行重新排序及過濾，并且有非常不錯的洗牌過渡動畫效果，可以應用在很多項目中來增強用戶體驗。本文以實際項目應用來講解Quicksand的使用。

XHTML

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

XHTML結構由一個導航條和一個內容列表組成。在內容列表#list里，我給每個li都加了一個id屬性，這個是為了方便Quicksand插件調用。

CSS

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

我給導航條#nav設置了選項卡風格，并設置選中狀態#nav ul li.cur的樣式。列表內容區也設置了每張圖片的固定高度和寬度。

jQuery

首先，復制列表區的內容:

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

然后，來實現選項卡風格，當點擊導航時，給當前點擊的項加上選中的樣式，同時其他項移除選中狀態的樣式：

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

接著，繼續在單擊時間里，獲取當前點擊選項的ID，通過判斷ID值，獲取數據源$source，最后調用quicksand插件。完整的代碼如下：

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

Quicksand插件提供了幾個參數可配置：

duration：過渡動畫的時間，以毫秒為單位。

attribute：關聯數據的屬性，本例設置為id。

easing：動畫緩沖方式。

還有一個方法enhancement：function(c) {}可以自定義函數調用。

順便提一下，IE6下沒有過渡動畫效果，IE7+，以及其他高級瀏覽器均測試通過。

以上所述就是本文的全部內容了，希望大家能夠喜歡。