JavaScript 手风琴效果

Unsplash

我们之前在 JavaScript 鼠标滑动，图片显示隐藏 这篇博文中实现了一个简化版的手风琴效果，简而言之，手风琴效果能够帮助你，在有限的页面空间内，展示多个内容片段，使得用户能非常友好的实现多个内容片段之间的切换

HTML 结构如下

    

        

            
            
Nian糕 1
            
Nian糕 1
        
        

               
            
Nian糕 2
            
Nian糕 2
        
        

            
            
Nian糕 3
            
Nian糕 3
        
        

            
            
Nian糕 4
            
Nian糕 4
        
        

            
            
Nian糕 5
            
Nian糕 5
        
        

            
            
Nian糕 6
            
Nian糕 6
        
    

CSS 样式如下

#box{width:1180px;height:360px;border:4px solid #000;margin:100px auto;overflow:hidden}
ul{width:2000px}
ul li{width:197px;height:360px;float:left;box-shadow:-4px 0 20px #000;position:relative}
img{width:980px;height:360px}
p{position:absolute;left:0;width:100%;height:360px;background:rgba(0,0,0,.3);color:#fff;text-align:center;font-weight:700}
.p1{top:0}
.p2{bottom:0}

JS 获取到鼠标滑上去的元素、该元素的兄弟元素以及该元素的子元素，实现相应的自定义动画

$("#box ul li").hover(function(){
    $(this).stop().animate({
        "width": "960px"
    },1000).siblings().stop().animate({
        "width": "44px"
    }, 1000)
    $(this).find("p").stop().animate({
        "height": "40px",
        "line-height": "40px"
    }, 1000)
},function(){//鼠标移开实现什么效果
    $("#box ul li").stop().animate({
        "width": "197px"
    }, 1000)
    $(this).find("p").stop().animate({
        "height": "360px",
        "line-height": "360px"
    }, 1000)
})

运行结果

本篇的内容到这里就全部结束了，源码我已经发到了 GitHub Source_code 上了，有需要的同学可自行下载，预览效果可点击 effect

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为签约作者献上一发助攻吧，谢谢！^ ^