JQ实现王者荣耀手风琴效果

准备

htm+lcss布局和样式分析

HTMl是一个容器装着无序列表，li内装着俩图片，一个是小头像图片，另外一个是详情大图片

<div class="box">
        <ul>
            <li class="current">
                <a href="#"><img src="upload/c1.jpg" class="small"><img src="upload/c.png" class="big"></a>
            </li>
            <li>
                <a href="#"><img src="upload/m1.jpg" class="small"><img src="upload/m.png" class="big"></a>
            </li>
            <li>
                <a href="#"><img src="upload/z1.jpg" class="small"><img src="upload/z.png" class="big"></a>
            </li>
            <li>
                <a href="#"><img src="upload/w1.jpg" class="small"><img src="upload/w.png" class="big"></a>
            </li>
            <li>
                <a href="#"><img src="upload/t1.jpg" class="small"><img src="upload/t.png" class="big"></a>
            </li>
            <li>
                <a href="#"><img src="upload/h1.jpg" class="small"><img src="upload/h.png" class="big"></a>
            </li>
            <li>
                <a href="#"><img src="upload/l1.jpg" class="small"><img src="upload/l.png" class="big"></a>
            </li>
        </ul>
    </div>

CSS

 * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .box {
            margin: 100px auto;
            width: 50%;
            background: url(upload/bg.png) no-repeat;
            padding: 10px;
        }

        .box ul {
            overflow: hidden;
        }

        .box li {
            float: left;
            position: relative;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }

        .box .big {
            display: none;
            /* position: absolute; */
            width: 224px;
            top: 0;
        }

        .box .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
        }

        /* 这里权重20 覆盖了上面.box li （权重11）的width属性值 */
        .box .current {
            width: 224px;
        }

        .current .big {
            display: block;
        }

        .current .small {
            display: none;
        }

样式布局大概就是先定义好box的宽度，高度后面由图片撑开，再加上背景图片（不过一开始因为没给高度看不到）

然后再给li添加浮动来一行显示，再给上小头像图片的高度和宽度，同时给ul清除浮动，不然box高度塌陷，无法正常显示背景图片

就像这样：
不过因为大图片和小图片同时出现，就会出现换行的情况
，这里可以将大图片.big类设置display：none
这里给的是li相对定位，大图片没给绝对定位，小图片给绝对定位

最终布局差不多就这样了
然后可以设置第一个li内的大图片显示，小图片隐藏

JS

 $(".box li").mouseover(function () {
            $(this).stop().animate({
                width: 224
            }).find(".small").stop().fadeOut().next(".big").stop().fadeIn()
            $(this).siblings().stop().animate({
                width: 69
            }).find(".small").stop().fadeIn().next(".big").stop().fadeOut()
        })

jq就是通过每个li的鼠标移入事件来改变li的宽度（变长为大图片的宽度），再给小图片淡出效果，加上大图片的淡入效果
再把li其他兄弟的宽度缩小为原来的宽度（小图片宽度）给小图片淡入效果，加上大图片的淡出效果
最后在动画前面都加上stop方法效果来解决动画队列问题。