解析js制作手风琴相册

「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」。

"推拉门"动效也可以称作"手风琴"效果, 就是当我们鼠标滑过某一页相册div时，隐藏其他同级div，只显示这一个，计算好相册的宽度，改变某一页相册的宽度时，该div撑开，右边的div会因此改变位置。

首先我们创建需要div以及内容

    <div class="wrap">
        <div class="list">
            <div class="hide">
                <p>如虎添亿好财运</p>
            </div>
        </div>
        <div class="list">
            <div class="hide">
                <p>生龙活虎好体魄</p>
            </div>
        </div>
        <div class="list">
            <div class="hide">
                <p>虎虎生威好气势</p>
            </div>
        </div>
        <div class="list">
            <div class="hide">
                <p>虎福临门好运气</p>
            </div>
        </div>
    </div>

class="wrap" 的div是全部内容的容器，我们通过改变它的位置，改变整个相册的位置

       .wrap{
            width: 1090px;
            height: 429px;
            background-color: pink;
            margin: 50px auto;
        }

class="list"的div是每一页相册的容器, 这里的大小和wrap的大小一致，将每一页相册的背景改变成我们所需要的图片地址。

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。Odd 和 even 是可用于匹配下标是奇数或偶数的子元素。这里因为list的子元素只要背景不一样，所以直接在设置list大小的时候将全部背景改成bgc111.jpg

width: 100px 使每一页相册只显示标题部分， float: left; 使所有相册靠左，模拟手风琴

        .list{
            width: 100px;
            height: 429px;
            float: left;
            background-image: url("../../img呀/bgc111.jpg");
        }
        .list:nth-child(2){
            background-image: url("../../img呀/动漫手指相机.jpg");
        }
        .list:nth-child(3){
            background-image: url("../../img呀/好听到单曲循环的热歌.png");       
        }
        .list:nth-child(4){
            background-image: url("../../img呀/章鱼哥and海绵宝宝.jpg");
            width: 790px;
         
        }

hide是每一页相册的标题部分，给它设置一个黑色半透明的背景，使里面的文字垂直居中

        .hide{
            width: 100px;
            height: 429px;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
        }
        p{
            color: #FFF;
            padding: 43px;
        }

给list绑定鼠标悬停事件，当鼠标悬停的时候，使用stop()停止当前对象的动画使该页相册在0.5秒将宽度改变为790px（wrap的宽度1090 - 另外3*100标题宽度）

siblings() 方法返回被选元素的所有同级元素。

        $(".list").hover( function(){
            $(this).stop().animate({
                width:'790px' 
            },500).siblings().stop().animate({
                width:'100px'
            },500)
        }) ;