Javascript jQuery将div缩放到父级

我被难住了，我已经写了一些代码来在一个div中缩放一个div。为了解决这个问题，我已经断章取义地将代码带出上下文来显示一个工作版本

基本上是加载的，如果用户调整浏览器的大小，它将动态缩放div，使其与容器div成比例地匹配

这一切都很好。我有一个

下拉选择

，使用户可以更改较小div的大小。它使用

.removeClass

和

.addClass

。然后调用scale函数，但是只有当scale函数被计时器延迟时，它才会工作，即：

$("#pageSize").removeClass();
$("#pageSize").addClass($("#paper").val());
setTimeout(function(){ 
  scalePages();
}, 1000);

这行不通

$("#pageSize").removeClass();
$("#pageSize").addClass($("#paper").val());
scalePages();

我不明白为什么它需要计时器。我已经试着把它放在一个回调函数中，但这仍然有效。有谁有更好的解决办法吗

scalePages（）；
//使用下划线延迟调整大小方法，直到完成调整窗口大小
$（窗口）.resize（u.debounce（函数）（）{
scalePages（）；
}, 0));
函数scalePages（）{
var scaleX=$（'.content-article'）.width（）/（$（“+$（'#pageSize'）.attr（'class'））.width（））；
var scaleY=$（'.content-article'）.height（）/（$（“+$（'#pageSize'）.attr（'class'））.height（））；
变量scale=（scaleX>scaleY）？scaleY:scaleX；
var newLeftPos=Math.abs（Math.floor（（$（“+$（'pageSize'））.attr（'class'））.width（））*scale）-$（'.content-article'）.width（））/2）；
var newtaptops=Math.abs（Math.floor（（$（“+$（'pageSize'））.attr（'class'））.height（））*scale）-$（'.content-article'）.height（））/2）；
$（'#pageSize'）.attr（'style'，'-webkit转换：缩放（'+scale+'）；左：'+newLeftPos+'px；上：'+newantops+'px；'）；
}
$（“#纸张”）。更改（函数（）{
$（“#pageSize”）.removeClass（）；
$（“#pageSize”）.addClass（$（“#paper”）.val（））；
setTimeout（函数（）{
scalePages（）；
}, 1000);
});
文章{
高度：250px；
宽度：500px；
显示器：flex；
背景：黄色；
位置：相对位置；
}
#纸{
浮动：对；
}
页面{
背景：黑色；
显示：块；
保证金：0自动；
-ms变换原点：左上角；
-webkit变换原点：左上角；
变换原点：左上角；
-webkit过渡：所有500毫秒的缓进缓出！重要；
过渡：所有500毫秒的缓进缓出！重要；
位置：绝对位置；
}
.大{宽：5000px；高：8000px；}
.small{高度：95px；宽度：41px；}

大的
小的

scalePages（）；
//使用下划线延迟调整大小方法，直到完成调整窗口大小
$（窗口）.resize（u.debounce（函数）（）{
scalePages（）；
}, 0));
函数scalePages（）{
var scaleX=$（'.content-article'）.width（）/（$（“+$（'#pageSize'）.attr（'class'））.width（））；
var scaleY=$（'.content-article'）.height（）/（$（“+$（'#pageSize'）.attr（'class'））.height（））；
变量scale=（scaleX>scaleY）？scaleY:scaleX；
var newLeftPos=Math.abs（Math.floor（（$（“+$（'pageSize'））.attr（'class'））.width（））*scale）-$（'.content-article'）.width（））/2）；
var newtaptops=Math.abs（Math.floor（（$（“+$（'pageSize'））.attr（'class'））.height（））*scale）-$（'.content-article'）.height（））/2）；
$（'#pageSize'）.attr（'style'，'-webkit转换：缩放（'+scale+'）；左：'+newLeftPos+'px；上：'+newantops+'px；'）；
}
$（“#纸张”）。更改（函数（）{
$（“#pageSize”）.removeClass（）；
$（“#pageSize”）.addClass（$（“#paper”）.val（））；
});
文章{
高度：250px；
宽度：500px；
显示器：flex；
背景：黄色；
位置：相对位置；
}
#纸{
浮动：对；
}
页面{
背景：黑色；
显示：块；
保证金：0自动；
-ms变换原点：左上角；
-webkit变换原点：左上角；
变换原点：左上角；
-webkit过渡：所有500毫秒的缓进缓出！重要；
过渡：所有500毫秒的缓进缓出！重要；
位置：绝对位置；
}
.大{宽：5000px；高：8000px；}
.small{高度：95px；宽度：41px；}

大的
小的
我会回答我自己的问题，谢谢你的帮助。我找到了需要定时器的原因。这是CSS的过渡！（持续500毫秒）

我把台词注释掉了

-webkit-transition: all 500ms ease-in-out !important;
transition: all 500ms ease-in-out !important;

然后拿出计时器，像个魔咒一样工作！不管怎样，如果没有转换，最终结果看起来会更好，因为转换现在是即时的

下面是完整的例子


scalePages（）；
//使用下划线延迟调整大小方法，直到完成调整窗口大小
$（窗口）.resize（u.debounce（函数）（）{
scalePages（）；
}, 0));
函数scalePages（）{
var scaleX=$（'.content-article'）.width（）/（$（“+$（'#pageSize'）.attr（'class'））.width（））；
var scaleY=$（'.content-article'）.height（）/（$（“+$（'#pageSize'）.attr（'class'））.height（））；
变量scale=（scaleX>scaleY）？scaleY:scaleX；
var newLeftPos=Math.abs（Math.floor（（$（“+$（'pageSize'））.attr（'class'））.width（））*scale）-$（'.content-article'）.width（））/2）；
var newtaptops=Math.abs（Math.floor（（$（“+$（'pageSize'））.attr（'class'））.height（））*scale）-$（'.content-article'）.height（））/2）；
$（'#pageSize'）.attr（'style'，'-webkit转换：缩放（'+scale+'）；左：'+newLeftPos+'px；上：'+newantops+'px；'）；
}
$（“#纸张”）。更改（函数（）{
$（“#pageSize”）.removeClass（）；
$（“#pageSize”）.addClass（$（“#paper”）.val（））；
//setTimeout（函数（）{
scalePages（）；
//}, 1000);
});
文章{
高度：250px；
宽度：500px；
显示器：flex；
背景：黄色；
位置：相对位置；
}
#纸{
浮动：对；
}
页面{
背景：黑色；
显示：块；
保证金：0自动；
-ms变换原点：左上角；
-webkit变换原点：左上角；
变换原点：左上角；
/*-webkit过渡：所有500毫秒的缓进缓出！重要；
过渡：所有500毫秒的缓进缓出！重要*/
位置：绝对位置；
}
.大{宽：5000px；高：8000px；}
.小{高度：95px；宽度：41px；}