<style>
#image1{position:absolute; z-index:6; cursor:pointer; width:150px;height:100px;background-image: url("/img/site/bg.png");}
#image2{ position:absolute; z-index:5; cursor:pointer;}
.demo_stage{height: 100px;}
</style>
<script>
$(document).ready(function(){
//画像データ取得
var margin = $("#image1").width()/2;
var width = 150;
var height = 100;
//初期(裏面に隠す)
$("#image2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image1").click(function(){
$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:200});
window.setTimeout(function() {
$("#image2").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:200});
},200);
});
$("#image2").click(function(){
$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:200});
window.setTimeout(function() {
$("#image1").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:200});
},200);
});
});
</script>
<h2>クリックで画像をめくる</h2>
<div class="demo_stage">
<img id="image1" width="150" src="/image/common/1px.gif" />
<img id="image2" width="150" src="/image/sample/cat/001.jpg" />
</div>
<style>
.image_f{ z-index:3; height:90px;background-image: url("/img/site/bg.png");}
.image_b{ z-index:2; height:90px;}
.card_item {position :relative;float:left;margin:0 10px 10px 0; width:130px;height:90px;float:left;}
.card_item img {position :absolute;border:0px;}
</style>
<script>
$(document).ready(function(){
//画像データ取得
var margin = $("#image1a").width()/2;
var width = $("#image1a").width();
var height = $("#image1a").height();
//初期(裏面に隠す)
$(".image_b").css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
//始動! 3秒
//要リファクタリング
window.setTimeout(function() {
$("#image1a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:200});
window.setTimeout(function() {
$("#image1b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:200});
},200);
},1000+300*1);
window.setTimeout(function() {
$("#image2a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:200});
window.setTimeout(function() {
$("#image2b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:200});
},200);
},1000+300*2);
window.setTimeout(function() {
$("#image3a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:200});
window.setTimeout(function() {
$("#image3b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:200});
},200);
},1000+300*3);
window.setTimeout(function() {
$("#image4a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:200});
window.setTimeout(function() {
$("#image4b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:200});
},200);
},1000+300*4);
window.setTimeout(function() {
$("#image5a").stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:200});
window.setTimeout(function() {
$("#image5b").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:200});
},200);
},1000+300*5);
});
</script>
<h2>自動でめくる</h2>
<div class="c">
<div class="pd10">
<div class="card_item">
<img id="image1a" class="image_f" width="130" src="/image/common/1px.gif" />
<img id="image1b" class="image_b" width="130" src="/image/sample/cat/001.jpg" />
</div>
<div class="card_item">
<img id="image2a" class="image_f" width="130" src="/image/common/1px.gif" />
<img id="image2b" class="image_b" width="130" src="/image/sample/cat/002.jpg" />
</div>
<div class="card_item">
<img id="image3a" class="image_f" width="130" src="/image/common/1px.gif" />
<img id="image3b" class="image_b" width="130" src="/image/sample/cat/003.jpg" />
</div>
<div class="card_item">
<img id="image4a" class="image_f" width="130" src="/image/common/1px.gif" />
<img id="image4b" class="image_b" width="130" src="/image/sample/cat/004.jpg" />
</div>
<div class="card_item">
<img id="image5a" class="image_f" width="130" src="/image/common/1px.gif" />
<img id="image5b" class="image_b" width="130" src="/image/sample/cat/005.jpg" />
</div>
</div>
</div>