css实现抽屉动画 div显示隐藏的过渡效果

参考自:css实现抽屉动画 div显示隐藏的过渡效果_Artsman的博客-CSDN博客_css抽屉效果

 html 块

css 块

.exampleBox{
    width: 200px;
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.5s;
}
.imgBox{
    width: 200px;
    height: 200px;
    background-color: purple;
}
.hideBox{
    width:100%;
    height: 300px;
    background: darkcyan;
}
.exampleBox.on{
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.5s;
}

 JS 部分

$(".imgBox").hover(function() {
     // 鼠标移入时添加on类
     $(this).parent().addClass('on')
        
}, function() {
    // 鼠标移出时移出on类
    $(this).parent().removeClass('on')
});

你可能感兴趣的:(css3,css,前端,html)