jQueryでフィルタ（フィルタリング）機能をシンプルに実装する方法｜BLACKFLAG写真の一覧ページなど、Webページ上でたくさん並べられたコンテンツ要素に対して カテゴリ分けした括りなどで、絞り込んだ状態で表示するフィルタ機能。 ページ上に表示する要素が数多くある場合に有効な機能になったりしますが そんなフィルタ機能をjQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。 まずは動作のサンプルから。 下記画面の上部にあるカテゴリリンクをクリックすると そのカテゴリの種類で絞り込まれた状態で画像が表示されます。 フィルタ用のリンクをクリックすることで サイズの縮小とフェードのアニメーションが付いた形で 画像がフィルタリングされます。 このフィルター機能の全体構成について、 まずはHTMLから。 ◆HTML <div id="filter"> <a href="javascript:void(0);" class="allitem">ALL</a>
