Coding Architecture

スライドのアニメーションでカテゴリを切り替えるFiltering Blocksを試してみました。思ったより使いやすいし、おもしろいかも。

demo

■HTML
<div id="document">

<h1>Filtering Blocks</h1>

<ul id="nav" class="clearfix">
<li><a href="#" id="allList" class="current">和色と洋色</a></li>
<li><a href="#" id="w" class="filter">和色</a></li>
<li><a href="#" id="y" class="filter">洋色</a></li>
</ul>


<div class="entry-item w clearfix">
<div class="imageA01"><img src="images/img0101.gif" alt="" width="200" height="100" /></div>
<div class="textA01">
<h2>山吹色 やまぶきいろ</h2>
<p>test test test test test</p>
</div>
</div>


<div class="entry-item y clearfix">
<div class="imageA01"><img src="images/img0102.gif" alt="" width="200" height="100" /></div>
<div class="textA01">
<h2>翡翠色 ひすいいろ</h2>
<p>test test test test test</p>
</div>
</div>


<div class="entry-item w clearfix">
<div class="imageA01"><img src="images/img0201.gif" alt="" width="200" height="100" /></div>
<div class="textA01">
<h2>ローズピンク rose pink</h2>
<p>test test test test test</p>
</div>
</div>


</div>


■CSS
#document{ 
width: 690px;
margin: 20px auto;
text-align:left;
}

ul#nav{ 
margin:20px 0;
}

ul#nav li{ 
float:left;
display:inline;
margin-right:10px;
}

.entry-item{
clear:both;
width:100%;
margin-bottom:16px;
cursor:pointer;
}

.entry-item .imageA01{
float:left;
}

.entry-item .textA01{
overflow:hidden;
padding-left:20px;
zoom:1;
}

.current{
font-weight: bold;
}

■JS
(function($){

// Shuffle function from: http://james.padolsey.com/javascript/shuffling-the-dom/
    
$.fn.shuffle = function() {

        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
            });
        
        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });
        
        return $(shuffled);
    };
})(jQuery);

//ランダムに表示しない場合ここより上をすべて削除
   
$(function(){
	       
   $(".entry-item")
        .css("opacity","1")
       .hover(function(){
           $(this).css("opacity","0.6");
       }, function() {
           $(this).css("opacity","1");
       })
       .click(function(){
           location.href = $(this).attr("rel"); 
           return false;
       });
       
   $("#allList").click(function(){
       $(".entry-item").slideDown();
       $("#nav a").removeClass("current");
       $(this).addClass("current");
       return false;
   });
   
   $(".filter").click(function(){
        var thisFilter = $(this).attr("id");
        $(".entry-item").slideUp();
        $("."+ thisFilter).slideDown();
        $("#nav a").removeClass("current");
        $(this).addClass("current");
        return false;
   });
   
   $(".entry-item").shuffle();//ランダムに表示しない場合この行を削除

});