Coding Architecture

Easy Display Switch with CSS and jQueryを今度使うので試してみました。

demo

■JS
<script type="text/javascript">
$(document).ready(function(){

$("a.switch_thumb").toggle(function(){
$(this).addClass("swap"); 
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").addClass("thumb_view"); 
});
}, function () {
$(this).removeClass("swap");
$("ul.display").fadeOut("fast", function() {
$(this).fadeIn("fast").removeClass("thumb_view");
});
}); 

});
</script>

■HTML
<!-- [ Main ] -->
<div id="main" class="clearfix">
<p class="switch01"><a href="#" class="switch_thumb">Switch Thumb</a></p>
<ul class="display">
<li>
<div class="content_block">
<a href="#"><img src="images/img01.gif" alt="" width="200" height="100" /></a>
<h2><a href="#">瑠璃色 るりいろ</a></h2>
<p>テストテストテストテストテストテストテストテストテストテスト</p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="images/img02.gif" alt="" width="200" height="100" /></a>
<h2><a href="#">緋色 ひいろ</a></h2>
<p>テストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="images/img03.gif" alt="" width="200" height="100" /></a>
<h2><a href="#">山吹色 やまぶきいろ</a></h2>
<p>テストテストテストテストテストテストテストテストテストテスト</p>
</div>
</li>
<li>
<div class="content_block">
<a href="#"><img src="images/img04.gif" alt="" width="200" height="100" /></a>
<h2><a href="#">翡翠色 ひすいいろ</a></h2>
<p>テストテストテストテスト</p>
</div>
</li>
</ul>
</div>
<!-- [ /Main ] -->

■CSS
#main{
width:660px;
}
ul.display {
float: left;
width: 660px;
}
ul.display li {
float: left;
width: 660px;
display:inline;
margin:0;
padding: 0 0 20px;
}
ul.display li .content_block {
padding: 0;
text-align:left;
}
ul.display li .content_block a img{
background: #fff;
margin: 0 15px 0 0;
float: left;
}
ul.thumb_view li{
width: 200px;
margin-right:20px;
display:inline;
}
ul.thumb_view li p{
display: none;
}
ul.thumb_view li .content_block a img {
margin: 0 0 10px;
}
p.switch01{
padding:20px 0;
}
a.switch_thumb {
width: 122px;
height: 26px;
line-height: 26px;
padding: 0;
display: block;
background:url(images/switch.gif) no-repeat;
outline: none;
text-indent: -9999px;
}
a:hover.switch_thumb {
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
a.swap { background-position: left bottom; }