当最小/最大宽度匹配特定宽度时，jquery调整div的大小 [英] jquery resize div when min/max width matches certain width

问题描述

如果当窗口宽度低于x px或％时，如何将div逐渐重新设置为0，并且当窗口大于x px或％时，如何返回最大宽度？

解决方案

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

CSS

  #myElementToResize {
 width：100px; 
 -webkit-transition：width 2s; 
转换：宽度2s; 
} 
 .minimized {
 width：0px; 
 
  

JS

<$ p如果（$（window）.width（）<= 768）{
$（＃myElementToResize），$ p> $（window）.resize（function（）{
） ）.addClass（minimized）;
} else {
$（＃myElementToResize）。removeClass（minimized）;
}
}）


how do I re-size a div gradually to 0 if as window width is under x px or %, and back to max-width when window bigger than x px or % ?

解决方案

This would normally be done with CSS, using a CSS transition property, and then using jQuery's 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");
    }
})

这篇关于当最小/最大宽度匹配特定宽度时，jquery调整div的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！