jQuery simple accordion effect

Server 2020-02-28 20:00:36 views: null

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                position: absolute;
                left: 100px;
                width: 500px;
                height: 100px;
                background-color: #A0522D;
            }
            li{
                box-sizing: border-box;
                float: left;
                width: 50px;
                height: 100px;
                background-color: #0070C9;
                border: 1px white solid;
                list-style: none;
                position: relative;
            }
            .aa{
                width: 300px;

            }
            .last{
                position: absolute;
                right: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <ul id="box">
            <li class="aa">1</li>
            <li class="">2</li>
            <li class="">3</li>
            <li class="">4</li>
            <li class="last">5</li>
        </ul>
        <script src="../jQuery/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $('#box li').mouseover(function(){
                    //让指定li变宽                                   让其他li变窄
                    $(this).stop().animate({'width':'300px'},800).find().end().siblings().stop().animate({'width':'50px'},800)
                })
            })
        </script>
    </body>
</html>