1-10 jquery 手风琴

HTML部分

		<ul>
			<li class="box">
				<a href="#">
					<img src="./img/c.png" alt="" class="big">
					<img src="./img/c1.jpg" alt="" class="small">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/c.png" alt="" class="big">
					<img src="./img/c1.jpg" alt="" class="small">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/c.png" alt="" class="big">
					<img src="./img/c1.jpg" alt="" class="small">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/c.png" alt="" class="big">
					<img src="./img/c1.jpg" alt="" class="small">
				</a>
			</li>
		</ul>

CSS

<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			ul {
				width: 500px;
				height: 70px;
				
			}
			
			ul li {
				width: 69px;
				height: 70px;
				position: relative;
				float: left;
			}
			img {
				height: 69px;
			}
			//大图全设为不可见
			.big {
				display: none;
			}
			//设置显示容器 
			.box {
				width: 224px;
			}

			.box>a>.big {
				display: block;
			}

			.box>a>.small {
				display: none
			}
			
			// 定位 使小图片显示在大图片上方
			.small {
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>

JS

$( function(){
		$('ul>li').mouseenter(function(){
					// 移入时候显示为大图
					$(this).stop().animate({width:224}).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn()
					//移入时候 其他元素显示为小图
					$(this).siblings().stop().animate({width:69}).find('.small').fadeIn().stop().siblings('.big').stop().fadeOut()
				})
			})

思路：移入事件时 第一个设置为大图像素 其余全部设置为小图像素  修改元素内大小图fadein和fadeout