jquery实现图片翻牌旋转特效

主要功能是jquery配合动画插件animate实现图片翻牌旋转特效，当鼠标悬浮到图片上的时候就实现了图片与文字间的切换，大家好好利用哦。。。

分类：其它特效 > jQuery插件难易：

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

首先引用文件

<script type="text/javascript" src="js/jquery.min.js"></script>

实现全部功能的jquery代码如下：

var aLi = $('#brand .bd-box li');
				var aImg =  $('#brand .bd-box li img');
				var aSpan = $('#brand .bd-box li span');
				aLi.each(function(index){
					$(this).mouseover(function(){
						aSpan.eq(index).stop();
						aImg.eq(index).stop();
						aImg.eq(index).css({zIndex:1}).animate({
							top:37,
							height:0
						},80,'',function(){
							$(this).hide();
							aSpan.eq(index).show().css({zIndex:2}).animate({
								top:0,
								height:75
							},80)
						})
					})
					$(this).mouseout(function(){
						aSpan.eq(index).stop();
						aImg.eq(index).stop();
						aSpan.eq(index).css({zIndex:1}).animate({
							top:37,
							height:0
						},80,'',function(){
							$(this).hide();
							aImg.eq(index).show().css({zIndex:2}).animate({
								top:0,
								height:75
							},80)
						})
					})
				})
			})