【jquery】手风琴思路

html 代码：

<!--手风琴效果-->
<div class="flash4">
  <ul>
    <li class="first">
      <div class="imgTop"><img src="http://www.jq22.com/img/cs/500x500-1.png" alt="" class="tm" width="538" height="405"></div>
      <div class="imgCen">给你15分钟做“对”的时尚人</div>
      <div class="imgBot"> <a href="###">
        <p class="bt_1">服饰</p>
        <p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p>
        </a> </div>
    </li>
    <li>
      <div class="imgTop"><img src="http://www.jq22.com/img/cs/500x500-2.png" alt="" width="538" height="405"></div>
      <div class="imgCen">蒂芙尼为你吟唱一曲自然颂</div>
      <div class="imgBot"> <a href="###">
        <p class="bt_1">服饰</p>
        <p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p>
        </a> </div>
    </li>
    <li>
      <div class="imgTop"><img src="http://www.jq22.com/img/cs/500x500-6.png" alt="" width="538" height="405"></div>
      <div class="imgCen">重返20岁试用周</div>
      <div class="imgBot"> <a href="###">
        <p class="bt_1">服饰</p>
        <p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p>
        </a> </div>
    </li>
    <li class="fast">
      <div class="imgTop"><img src="http://www.jq22.com/img/cs/500x500-7.png" alt="" width="538" height="405"></div>
      <div class="imgCen">玩美女孩盖天天 阳光女神进阶攻略</div>
      <div class="imgBot"> <a href="###">
        <p class="bt_1">服饰</p>
        <p class="bt_2"><span>封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p>
        </a> </div>
    </li>
  </ul>
</div>
<!--手风琴结束-->

css代码：

@charset "utf-8";
    * {
    margin:0px;
    padding:0px;
    font-family:"微软雅黑";
    font-size:12px;
    text-decoration:none;
    list-style-type:none;
}
img {
    border:0px;
}
.flash4 {
    width:1180px;
    height:450px;
    margin:0px auto;
    margin-bottom:20px;
    position:relative;
}
.flash4 ul li {
    width:106px;
    height:450px;
    border-left:1px solid #000;
    position:relative;
    overflow:hidden;
    float:left;
}
.flash4 ul li .imgTop img {
    opacity:0.4;
}
.flash4 ul li .imgTop img.tm {
    opacity:1;
}
.flash4 ul li .imgCon {
    width:538px;
    height:405px;
}
.flash4 ul li .imgCen {
    width:538px;
    height:50px;
    background:rgba(0,0,0,0.5);
    color:#fff;
    font-size:20px;
    line-height:50px;
    position:absolute;
    left:0px;
    bottom:45px;
    text-indent:20px;
    display:none;
}
.flash4 ul li .imgBot {
    width:538px;
    height:45px;
    background:#222;
}
.flash4 ul li .imgBot p.bt_1 {
    width:80px;
    line-height:45px;
    font-size:16px;
    color:#fff;
    text-indent:20px;
    float:left;
}
.flash4 ul li .imgBot p.bt_2 {
    width:458px;
    height:45px;
    line-height:45px;
    float:left;
    display:none;
}
.flash4 ul li .imgBot p.bt_2 span {
    font-size:14px;
    color:#fff;
    padding-right:30px;
    background:url(../images/part2_icon.png)no-repeat left center;
    padding-left:10px;
}
.flash4 ul li.first {
    width:538px;
}
.flash4 ul li.fast {
    position:absolute;
    right:0px;
    bottom:0px;
}

jquery代码：

//手风琴动画效果
var _index7 = 0;
$(".flash4 ul li").mouseover(function() {
    //$(this)当前对象设置正常宽度，而同级元素进行缩小宽度并隐藏其他元素。
    _index7 = $(this).index();
    $(this).stop().animate({
        width: 538
    }, 500).siblings("li").stop().animate({
        width: 106
    }, 500);
    $(".imgCen").eq(_index7).css("display", "block").siblings(".imgCen").css("display", "none");
    $("p.bt_2").eq(_index7).css("display", "block").siblings("p.bt_2").css("display", "none");
    $(".imgTop img").eq(_index7).addClass("tm").siblings(".imgTop img").removeClass("tm");
});
$(".flash4 ul li").mouseout(function() {
    $(this).eq(_index7).stop().animate({
        width: 106
    }, 500);
    $(".imgCen").css("display", "none");
     $("p.bt_2").css("display", "none");
});

原文地址：http://www.jq22.com/webqd3758