JQuery插件Quicksand實現超炫的動畫洗牌效果_jquery

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

XHTML

<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

#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

首先，複製清單區的內容:

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

然後，來實現選項卡風格，當點擊導航時，請為目前點擊的項目加上選取的樣式，同時其他項目移除選取狀態的樣式：

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

接著，繼續在點擊時間裡，取得目前點擊選項的ID，透過判斷ID值，取得資料來源$source，最後呼叫quicksand外掛程式。完整的程式碼如下：

$("#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 ，以及其他高級瀏覽器均測試通過。

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