jQuery 王者荣耀手风琴(折叠卡片)案例

效果如下:鼠标经过相应图片会展开大图 小图淡出 大图淡入效果
jQuery 王者荣耀手风琴(折叠卡片)案例_第1张图片jQuery 王者荣耀手风琴(折叠卡片)案例_第2张图片首先 四张小图实现 四张大图隐藏(不同的class)
随着hover事件 小图淡出fadeout 大图淡入fadein
animate保证淡入淡出的过程this指向的图片的长度不变
最后 需在效果前加上stop()取消效果的排队

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="Jq.js">
</script>
<script>
$(document).ready(function(){
//	$('a').find('img').hide();

  $('li').hover(function(){
  	
		$(this).find('.s1').animate({width:80}).stop().fadeOut(10,function(){
			$(this).siblings('.big').stop().fadeIn(10);
		});
		$(this).siblings('li').find('.big').animate({width:160}).stop().fadeOut(10,function(){
			$(this).siblings('.s1').stop().fadeIn(10);
		});
		
	
		
		});
		
});
</script>
<style>
	*{
		padding: 0;
		margin: 0;
	}
	li{
		display: inline;
		list-style: none;
		margin: 0;
		width: 100%;
		height:100%;
	}
	.s1{
		width:80px;
		height:80px;
	}
	
	.big{
		width:160px;
		height:80px;
		display: none;
	}
</style>
</head>

<body>
	<div>
		<ul>
			<li >
				<a href="#">
					<img src="img/1.png" alt="李白" class='s1' />
					<img src="img/d3.png" alt="李白大图"  class='big'/>
				</a>
			</li>
			<li >
				<a href="#">
					<img src="img/2.png" alt="诸葛亮" class='s1'/>
					<img src="img/d1.png" alt="诸葛大图"  class='big'/>
				</a>
			</li>
			<li >
				<a href="#">
					<img src="img/3.png" alt="KPL" class='s1'/>
					<img src="img/d4.png" alt="KPL大图"  class='big'/>
				</a>
			</li>
			<li >
				<a href="#">
					<img src="img/4.png" alt="不认得" class='s1'/>
					<img src="img/d2.png" alt="不认得大图"  class='big'/>
				</a>
			</li>
		</ul>
	</div>
</body>
</html>

你可能感兴趣的:(jQuery 王者荣耀手风琴(折叠卡片)案例)