jquery小案例-王者荣耀风琴

jquery小案例-王者荣耀风琴

//鼠标经过小li,当前小li变为224px,同时里面的小图片淡出，大图片淡入
其余兄弟小li宽度编程69px，小图片淡入，大图片淡出
<style>
	.small{
		position:absolute;
		top:
		left:
		width:
	}
	.big{	
		width:224px;
		display:none;	
	}
	.king li .current .big{
		display:block;
	}
	.king li .current .small{
		display：none；	
	}
</style>
<div class ="king">
	<ul>	
		<li class = "current">	
			<a href="#">	
				<img src ="" class= "small">
				<img src ="" class= "big">
			</a>
		</li>
		<li>	
			<a href="#">	
				<img src ="" class= "small">
				<img src ="" class= "big">
			</a>
		</li>
		<li>	
			<a href="#">	
				<img src ="" class= "small">
				<img src ="" class= "big">
			</a>
		</li>
	</ul>
</div>

$(function(){	
	//鼠标经过某个小li  
	$(.king li).mouseenter(function(){	
		//1.当前小li宽度变成224px  同时小图片淡出，大图片淡入
		$(this).stop().animate({width:224px}).find(".small").stop().fadeOut().siblings(".big").fadeIn();	
		//2.其余兄弟小li宽度69px,小图片淡入，大图片淡出
		$(this).stop().sinlings("li").animate({width:69}).find(".small").stop().fadeIn().siblings(".big").fadeOut("");
	})
})