jQuery Scale div到父

Question

我很难过，我已经编写了一些代码来扩展div中的div。出于这个问题的目的，我已经将代码脱离了上下文以显示工作版本。

基本上是在加载时，如果用户调整浏览器的大小，则使其动态缩放，使其在容器div中成比例地适合。

一切正常。我有dropdown select使用户能够更改较小div的大小。它使用.removeClass和.addClass。然后调用scale函数，但只有当scale函数被定时器延迟时才会起作用，即

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

这不行;

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

我很困惑为什么它需要一个计时器。我试图把它放在一个回调函数中，但仍然有效。有没有人有更好的解决方案呢？

＆＃13;

＆＃13;

 scalePages();
      
//using underscore to delay resize method till finished resizing window
$(window).resize(_.debounce(function () {
  scalePages();
}, 0));

function scalePages() {                    
  var scaleX = $('.content-article').width() / ($("."+$('#pageSize').attr('class')).width());
  var scaleY = $('.content-article').height() / ($("."+$('#pageSize').attr('class')).height());
  var scale = (scaleX > scaleY) ? scaleY : scaleX; 
  var newLeftPos = Math.abs(Math.floor(((($("."+$('#pageSize').attr('class')).width()) * scale) - $('.content-article').width())/2));
  var newTopPos = Math.abs(Math.floor(((($("."+$('#pageSize').attr('class')).height()) * scale) - $('.content-article').height())/2));
  $('#pageSize').attr('style', '-webkit-transform:scale(' + scale + ');left:' + newLeftPos + 'px;top:' + newTopPos + 'px;');
}
       
$("#paper").change(function() {
  $("#pageSize").removeClass();
  $("#pageSize").addClass($("#paper").val());
  setTimeout(function(){ 
    scalePages();
  }, 1000);
});

＆＃13;

article {
  height: 250px;
  width: 500px;
  display: flex;
  background: yellow;
  position: relative;
}

#paper {
  float: right;
}

page {
  background: black;
  display: block;
  margin: 0 auto;
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  -webkit-transition: all 500ms ease-in-out !important;
  transition: all 500ms ease-in-out !important;
  position: absolute;
}
            
.large {width: 5000px;height: 8000px;}
.small {height: 95px;width: 41px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>

<select id="paper">
  <option value="large">large</option>
  <option value="small">small</option> 
</select>                 
                
<article class="content-article">
  <page id="pageSize" class="large">
    <div id="map"></div>
  </page>
</article>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

 scalePages();
      
//using underscore to delay resize method till finished resizing window
$(window).resize(_.debounce(function () {
  scalePages();
}, 0));

function scalePages() {                    
  var scaleX = $('.content-article').width() / ($("."+$('#pageSize').attr('class')).width());
  var scaleY = $('.content-article').height() / ($("."+$('#pageSize').attr('class')).height());
  var scale = (scaleX > scaleY) ? scaleY : scaleX; 
  var newLeftPos = Math.abs(Math.floor(((($("."+$('#pageSize').attr('class')).width()) * scale) - $('.content-article').width())/2));
  var newTopPos = Math.abs(Math.floor(((($("."+$('#pageSize').attr('class')).height()) * scale) - $('.content-article').height())/2));
  $('#pageSize').attr('style', '-webkit-transform:scale(' + scale + ');left:' + newLeftPos + 'px;top:' + newTopPos + 'px;');
}
       
$("#paper").change(function() {
  $("#pageSize").removeClass();
  $("#pageSize").addClass($("#paper").val());
 
});

＆＃13;

article {
  height: 250px;
  width: 500px;
  display: flex;
  background: yellow;
  position: relative;
}

#paper {
  float: right;
}

page {
  background: black;
  display: block;
  margin: 0 auto;
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  -webkit-transition: all 500ms ease-in-out !important;
  transition: all 500ms ease-in-out !important;
  position: absolute;
}
            
.large {width: 5000px;height: 8000px;}
.small {height: 95px;width: 41px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>

<select id="paper">
  <option value="large">large</option>
  <option value="small">small</option> 
</select>                 
                
<article class="content-article">
  <page id="pageSize" class="large">
    <div id="map"></div>
  </page>
</article>

＆＃13;

＆＃13;

＆＃13;

刚刚从更改功能

中删除了该scalepages函数

Answer 2

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

我评论了这些台词;

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

然后取出计时器，就像一个魅力！无论如何，最终结果看起来更好，因为转换现在是立即的。

下面的完整示例......

scalePages();
      
//using underscore to delay resize method till finished resizing window
$(window).resize(_.debounce(function () {
  scalePages();
}, 0));

function scalePages() {                    
  var scaleX = $('.content-article').width() / ($("."+$('#pageSize').attr('class')).width());
  var scaleY = $('.content-article').height() / ($("."+$('#pageSize').attr('class')).height());
  var scale = (scaleX > scaleY) ? scaleY : scaleX; 
  var newLeftPos = Math.abs(Math.floor(((($("."+$('#pageSize').attr('class')).width()) * scale) - $('.content-article').width())/2));
  var newTopPos = Math.abs(Math.floor(((($("."+$('#pageSize').attr('class')).height()) * scale) - $('.content-article').height())/2));
  $('#pageSize').attr('style', '-webkit-transform:scale(' + scale + ');left:' + newLeftPos + 'px;top:' + newTopPos + 'px;');
}
       
$("#paper").change(function() {
  $("#pageSize").removeClass();
  $("#pageSize").addClass($("#paper").val());
  //setTimeout(function(){ 
    scalePages();
  //}, 1000);
});

article {
  height: 250px;
  width: 500px;
  display: flex;
  background: yellow;
  position: relative;
}

#paper {
  float: right;
}

page {
  background: black;
  display: block;
  margin: 0 auto;
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  /*-webkit-transition: all 500ms ease-in-out !important;
  transition: all 500ms ease-in-out !important;*/
  position: absolute;
}
            
.large {width: 5000px;height: 8000px;}
.small {height: 95px;width: 41px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>

<select id="paper">
  <option value="large">large</option>
  <option value="small">small</option> 
</select>                 
                
<article class="content-article">
  <page id="pageSize" class="large">
    <div id="map"></div>
  </page>
</article>