jQuery图片翻牌品牌翻转切换效果

html

<div style="width:660px;margin:0 auto;">

<div id="vertical" class="brand vertical">
<a target="_blank" href="#"><img alt="" src="images/1.jpg" /><div class="info">品牌翻转</div></a>
<a target="_blank" href="#"><img lta="" src="images/2.jpg" /><div class="info">品牌翻转</div></a>
<a target="_blank" href="#"><img alt="" src="images/3.jpg" /><div class="info">品牌翻转</div></a>
</div>

<div style="clear:both;"></div>

<div id="horizontal" class="brand horizontal">
<a target="_blank" href="#"><img alt="" src="images/1.jpg" /><div class="info">品牌翻转</div></a>
<a target="_blank" href="#"><img alt="" src="images/2.jpg" /><div class="info">品牌翻转</div></a>
<a target="_blank" href="#"><img alt="" src="images/3.jpg" /><div class="info">品牌翻转</div></a>
</div>

</div>

css

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial;background:#333;}
.brand a{
position: relative;
display: block;
float: left;
margin: 20px;
width: 180px;
height: 240px;
text-align: center;
}
.brand img{
width: 180px;
height: 240px;
background: #666;
}
.brand .info{
display: none;
background-color: #f0f0f0;
color: #369242;
line-height:240px;
}
.vertical .info{
width: 0;
height: 240px;
margin: 0 auto;
}
.horizontal img{
position: absolute;
top: 0;
left: 0;
}
.horizontal .info{
position: absolute;
top: 120px;
left: 0;
width: 180px;
height: 0;
}

js

var turn = function(target,time,opts){
target.find('a').hover(function(){
$(this).find('img').stop().animate(opts[0],time,function(){
$(this).hide().next().show();//$(this)指img
$(this).next().animate(opts[1],time);
});
},function(){
$(this).find('.info').animate(opts[0],time,function(){
$(this).hide().prev().show();
$(this).prev().animate(opts[1],time);
});
});
}
var verticalOpts = [{'width':0},{'width':'180px'}];  //垂直翻转只需改变width
var horizontalOpts = [{'height':0,'top':'120px'},{'height':'240px','top':0}];  //水平翻转需改变height和top

turn($('#vertical'),100,verticalOpts);
turn($('#horizontal'),100,horizontalOpts);

效果