當最小/最大寬度匹配特定寬度時，jQuery調整div的大小

Question

如果窗口寬度小於x px或％，如何將div的大小逐漸調整為0，而當窗口大於x px或％時又回到max-width？

Answer 1

通常使用CSS，使用CSS Transition屬性，然后使用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可以在觸發resize事件之前提供一點時間間隔。

 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>