jQueryスケールdivから親

Question

私は困惑しています。私はdiv内のdivをスケールするコードを書いています。この質問の目的のために、私は現実的なバージョンを示すためにコンテキスト外のコードを取りました。

基本的には読み込み中で、ユーザーがブラウザのサイズを変更した場合、divは動的にスケーリングされ、コンテナdivに比例します。

これはすべて問題なく動作します。私はdropdown selectを持っているので、ユーザーは小さなdivのサイズを変更することができます。それは.removeClassと.addClassを使用します。次に、スケール関数が呼び出されますが、スケール関数がタイマーによって遅延されている場合にのみ機能します。

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

これはうまくいきません。

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

なぜタイマーが必要なのか混乱しています。私はそれをコールバック関数に入れようとしましたが、まだこのdosentの仕事。誰にもこれに対する良い解決策はありますか？

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>

Answer 1

からそのscalepages機能を削除した私は、助けに感謝を自分の質問にお答えします。タイマーが必要な理由を知りました。 CSSの移行でした！ （持続500ms）

私は行をコメントアウトしました。

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

次に、タイマーを取り出して魅力的に働いた！トランジションが直ちに進行するので、最終的な結果はトランジションなしでも優れています。あなたはCSSを更新するとき

以下の全例...

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>

Answer 2

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()); 
 
    
 
});

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>

だけ変更機能