js 特效 手风琴效果

$(document).ready(function(){

//定义展开的块

var lastBlock = $('#a1');

//展开的块的宽度

var maxWidth = 406;

//折叠的块的宽度

var minWidth = 166;

$('.picon ul li').hover(function(){

$(lastBlock).animate(

{width: minWidth + "px"},

{queue:false,duration:1000}

);

$(this).animate(

{width:maxWidth + "px"},

{queue:false,duration:1000}

);

lastBlock = this;

});

});

	<div class="main">
			<div id="picon" class="picon">
				<ul>
					<li id="a1" style=" display: list-item;">
						<div class="xs_title">
                            限时特价车
                            <div class="left_zdj">
                                <p style="font-size:24px; color:#fff; margin-top:5px;"><span style="font-size:18px;">￥</span>224.55<span style="font-size:14px">万</span></p>
                                <p style="text-decoration:line-through; color:#fff;">指导价：￥26.55万</p>
                            </div>
                        </div>
						<img width="406" height="230" src="images/img_01.jpg" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动">
						<dl>
							<dt><img src="images/dz_logo.jpg" /></dt>
							<dd>
								<p style="color:#6d6d6d;">奥迪A4L</p>
								<p style="font-size:14px; color:#3c3c3c; font-weight:bold;"><a href="#">2014款   2.0T 至尊</a></p>
							</dd>
						</dl>
						<div class="lkgm_btn"><a href="#">立即购买</a></div>
					</li>
					<li style="width:166px; display: list-item;" class="">
						<div class="xs_title">
                            限时特价车
                            <div class="left_zdj">
                                <p style="font-size:24px; color:#fff; margin-top:5px;"><span style="font-size:18px;">￥</span>224.55<span style="font-size:14px">万</span></p>
                                <p style="text-decoration:line-through; color:#fff;">指导价：￥26.55万</p>
                            </div>
                        </div>
					<img width="406" height="230" src="images/2.jpg" alt="jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换">
						<dl>
							<dt><img src="images/dz_logo.jpg" /></dt>
							<dd>
								<p style="color:#6d6d6d;">奥迪A4L</p>
								<p style="font-size:14px; color:#3c3c3c; font-weight:bold;"><a href="#">2014款   2.0T 至尊</a></p>
							</dd>
						</dl>
						<div class="lkgm_btn"><a href="#">立即购买</a></div>
					</li>
					<li style="width: 166px; display: list-item;" class="">
						<div class="xs_title">
                            限时特价车
                            <div class="left_zdj">
                                <p style="font-size:24px; color:#fff; margin-top:5px;"><span style="font-size:18px;">￥</span>224.55<span style="font-size:14px">万</span></p>
                                <p style="text-decoration:line-through; color:#fff;">指导价：￥26.55万</p>
                            </div>
                        </div>
					   <img width="406" height="230" src="images/3.jpg" alt="jquery 导航菜单 jquery和CSS3制作一个动画导航的向下滑动框菜单">
						<dl>
							<dt><img src="images/dz_logo.jpg" /></dt>
							<dd>
								<p style="color:#6d6d6d;">奥迪A4L</p>
								<p style="font-size:14px; color:#3c3c3c; font-weight:bold;"><a href="#">2014款   2.0T 至尊</a></p>
							</dd>
						</dl>
						<div class="lkgm_btn"><a href="#">立即购买</a></div>
					</li>
					<li style="width: 166px; display: list-item;" class="">
						<div class="xs_title">
                            限时特价车
                            <div class="left_zdj">
                                <p style="font-size:24px; color:#fff; margin-top:5px;"><span style="font-size:18px;">￥</span>224.55<span style="font-size:14px">万</span></p>
                                <p style="text-decoration:line-through; color:#fff;">指导价：￥26.55万</p>
                            </div>
                        </div>
					    <img width="406" height="230" src="images/4.jpg" alt="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动">
						<dl>
							<dt><img src="images/dz_logo.jpg" /></dt>
							<dd>
								<p style="color:#6d6d6d;">奥迪A4L</p>
								<p style="font-size:14px; color:#3c3c3c; font-weight:bold;"><a href="#">2014款   2.0T 至尊</a></p>
							</dd>
						</dl>
						<div class="lkgm_btn"><a href="#">立即购买</a></div>
					</li>
				</ul>
			</div>
		</div>