当最小/最大宽度与某个宽度匹配时，jquery 调整 div 的大小答案

【问题标题】：jquery resize div when min/max width matches certain width当最小/最大宽度与某个宽度匹配时，jquery 调整 div 的大小
【发布时间】：2015-07-10 02:09:43
【问题描述】：

如果窗口宽度低于 x px 或 %，如何将 div 的大小逐渐调整为 0，当窗口大于 x px 或 % 时，如何将其重新调整为最大宽度？

【问题讨论】：

请发布您的代码，到目前为止您尝试了什么？你的 DOM 结构是什么样的？

标签： javascript jquery html

【解决方案1】：

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

CSS

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

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

【讨论】：

对不起，我忘了在问题中提到我还需要支持 IE7，它是否可以在没有过渡的情况下工作，因为它出现在 IE9+ 中？
这在 IE7 中不起作用，尽管我不知道你为什么要在十年前的浏览器中运行动画。这是一个可以帮助你的资源stackoverflow.com/questions/10651734/css-transforms-in-ie7

【解决方案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>

【讨论】：