2011年09月04日

豪華なエフェクトでソートや絞り込みを行うjQueryプラグイン「Isotope」

Isotopeは非常に美しいエフェクトで要素の絞り込みや並び替えを行えるjQueryプラグイン。プラグイン本体の読み込みとCSSに次の記述を追加しておきます。

.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}


次のように指定すると子要素の高さが揃えられ準備が完了です。

$('#unitItem').isotope({
layoutMode : 'fitRows'
})


次のようなメソッドを実行するとfilterで要素を絞り込みアニメーションして表示されるようになります。

$('#unitItem').isotope({ filter: ".hoge" });


posted by ねこまんま at 13:21 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。