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 を取得し、最後に流砂プラグインを呼び出します。完全なコードは次のとおりです:

$("#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 プラグインには、いくつかの構成可能なパラメーターが用意されています。
継続時間: トランジション アニメーションの時間 (ミリ秒単位)。
属性: 関連するデータの属性。この例では id に設定されます。
イージング: アニメーションのバッファリング方法。

関数呼び出しをカスタマイズするためのメソッド拡張機能 function(c) {} もあります。

ちなみに、IE6 やその他の高度なブラウザではトランジション アニメーション効果はありません。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。