jQuery两行代码实现手风琴效果！！！！！！（本文有点水，别介哈）

约定不等于承诺〃 2023-10-08 12:51 0阅读 0赞

## 废话不多说，直接上图 \*\*↓\*\* ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MDE1ODk3_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][2021052821484094.gif]  
源码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQueryUI</title>
        <style>
            *{
          
                margin: 0px;
                border: 0px;
            }
            body{
          
                background-color: #ffbebe;
            }
            .outer{
          
                width: 460px;
                height: 300px;
                position: absolute;
                display: flex;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                margin: auto;
            }
            li{
          
                list-style: none;    
            }
            div{
          
                width: 50px;
                height: 300px;
                margin-right: 10px;
                border-radius: 20px;
            }
            .d1{
          
                background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
            }
            .d2{
          
                background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
            }
            .d3{
          
                background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
            }
            .d4{
          
                background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
            }
            .d5{
          
                background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
            }
            .d6{
          
                background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
            }
        </style>
    </head>
    <body>
        <ul class="outer">
            <li>
                <div class="d1" style="width: 250px;"></div>
            </li>
            <li>
                <div class="d2"></div>
            </li>
            <li>
                <div class="d3"></div>
            </li>
            <li>
                <div class="d5"></div>
            </li>
            <li>
                <div class="d6"></div>
            </li>
        </ul>
    </body>
    
    <script src="./js/jquery-1.12.3.js"></script>
    <script>
        $('div').mouseenter(function(){
          
        //jQuery代码
            $(this).stop().animate({
          width: 250}, 300, 'swing');
            $('div').not(this).stop().animate({
          width: 50}, 300, 'swing');
        });
    </script>
    </html>

两行代码（手动狗头）：

$(this).stop().animate({width: 250}, 300, 'swing');
        $('div').not(this).stop().animate({width: 50}, 300, 'swing');

希望本文对兄台有所帮助！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MDE1ODk3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210528214920822.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3MDE1ODk3,size_16,color_FFFFFF,t_70
[2021052821484094.gif]: https://img-blog.csdnimg.cn/2021052821484094.gif