手风琴

先放效果图
代码:
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            border: none;
            display: block;
        }
        
        #acc {
            width: 640px;
            height: 140px;
            margin: 0 auto;
        }
        
        #acc ul {
            border-left: 1px solid #ddd;
            height: 140px;
            position: relative;
        }
        
        #acc ul li {
            width: 50px;
            height: 138px;
            border: 1px solid #ddd;
            float: left;
            list-style: none;
            border-left: 0;
            position: relative;
            overflow: hidden;
        }
        
        #acc ul li.active {
            width: 434px;
        }
        
        #acc ul li h3 {
            font-size: 14px;
            color: #000;
            font-weight: 100;
            width: 14px;
            height: 98px;
            padding: 40px 18px 0;
        }
        
        #acc ul li h3.active {
            background: #f42760;
            color: #fff;
        }
        
        #acc ul li div {
            width: 383px;
            height: 138px;
            background: blue;
            position: absolute;
            top: 0;
            left: 50px;
            border-left: 1px solid #ddd;
            z-index: 0;
        }
        
        #acc ul li img {
            width: 383px;
            height: 138px;
        }
        
        #acc ul li.last {
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <div id="acc">
        <ul>
            <li class="active">
                <h3 class="active">红玫瑰</h3>
                <div><img src="img/bg1.jpg" /></div>
            </li>
            <li>
                <h3>白玫瑰</h3>
                <div><img src="img/bg2.jpg" /></div>
            </li>
            <li>
                <h3>红玫瑰</h3>
                <div><img src="img/bg3.jpg" /></div>
            </li>
            <li>
                <h3>白玫瑰</h3>
                <div><img src="img/bg4.jpg" /></div>
            </li>
            <li class="last">
                <h3>红玫瑰</h3>
                <div><img src="img/bg5.jpg" /></div>
            </li>
        </ul>
    </div>
    <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
  
    <script type="text/javascript">
        $(function() {
            //鼠标移到当前li上，当前li的宽度变成434px,li里的h3要添加一个类名active让背景变红，文字变白
            $("#acc")
                .find("li")
                .mouseover(function() {
                    $(this)
                        .stop()
                        .animate({
                             "434px"
                        }, 800)
                        .children("h3")
                        .addClass("active")
                        //end()是从h3回到li上去
                        .end()
                        .siblings() //当前li的所有兄弟li
                        .stop()
                        .animate({
                             "50px"
                        }, 800)
                        .children("h3")
                        .removeClass("active");
                });
        });
    </script>
</body>

</html>