Question

如果窗口宽度低于x px或％，如何在窗口宽度大于x px或％时返回最大宽度，如何将div逐渐调整为0？

Answer 1

通常使用CSS，使用CSS转换属性，然后使用jQuery的addClass

来完成

CSS

#myElementToResize{
    width: 100px;
    -webkit-transition: width 2s;
    transition: width 2s;
}
.minimized{
    width: 0px;
}

JS

$(window).resize(function(){
    if ( $(window).width() <= 768 ){
        $("#myElementToResize").addClass("minimized");
    } else {
        $("#myElementToResize").removeClass("minimized");
    }
})

Answer 2

在整页上运行此示例。

在触发调整大小事件之前添加resizeTimer以提供一点时间间隔。

var resizeTimer;

$(window).on('resize',function(){
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function(){
        $("#theDiv").height($(window).height()/5);//calculation for height here as required
    }, 200);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="theDiv" style="background-color: yellow; border: 1px solid black; height: 100px"></div>

当最小/最大宽度匹配特定宽度时，jquery调整div

2 个答案: