アニメーションで複数のDivを最小化する

Question

div .panelsのwidthプロパティにアニメーションを追加しようとしています。私は遷移プロパティ、と.animate（）でCSSで試しましたが、うまくいきません。 と私は、calc（）がjQueryアニメーションと連動していないことに気付きました。

3番目のパネルは、右側に浮動するように、他の2つの幅の減算を常に持つ必要があります。

ex. width: 'calc(100% - ' + (panelWidth1 + panelWidth2) + 'px)' 

どのような提案をしても問題ありませんか？ ありがとう！

HMTL

<div class="actions"> 
    <button id="MinPanel1">Minimize Panel 1</button> 
    <button id="MinPanel2">Minimize Panel 2</button> 
</div> 

<div class="panels"> 
    <div class="panel1"></div> 
    <div class="panel2"></div> 
    <div class="panel3"></div> 
</div> 

JS

$(document).ready(function() { 

    $('#MinPanel1').click(function() { 
     var toggleWidth = $(".panel1").width() == 225 ? "57px" : "225px"; 
     $('.panel1').css({ 
      width: toggleWidth 
     }); 
     adjustPanel(); 
    }); 

    $('#MinPanel2').click(function() { 
     var toggleWidth = $(".panel2").width() == 330 ? "66px" : "330px"; 
     $('.panel2').css({ 
      width: toggleWidth 
     }); 
     adjustPanel(); 
    }); 


    adjustPanel = function() { 
     var panelWidth1 = $('.panel1').width(); 
     var panelWidth2 = $('.panel2').width(); 
     var panelWidthTotal = panelWidth1 + panelWidth2; 

     $('.panel3').css({ 
      width: '-webkit-calc(100% - ' + panelWidthTotal + 'px)', 
      width: '-moz-calc(100% - ' + panelWidthTotal + 'px)', 
      width: 'calc(100% - ' + panelWidthTotal + 'px)' 
     }); 
    } 

}); 

CSS

[...] 

.panel1, .panel2, .panel3{ 
    height: 100%; 
    float: left; 
    /*-moz-transition-property: width; 
    -o-transition-property: width; 
    -webkit-transition-property: width; 
    transition-property: width; 
    -moz-transition-duration: 300ms; 
    -o-transition-duration: 300ms; 
    -webkit-transition-duration: 300ms; 
    transition-duration: 300ms;*/ 
} 

[...] 

DEMO：JS FIDDLE

EDITED DEMO結果：JS FIDDLE

Answer 1

この試してみてください。ここでは

$(document).ready(function() { 

    $('#MinPanel1').click(function() { 
     var toggleWidth = $(".panel1").width() == 225 ? "57px" : "225px"; 
     $('.panel1').animate({ 
      width: toggleWidth 
     },function(){ 
      adjustPanel($('.panel1').width(), $('.panel2').width()) 
     }); 
    }); 

    $('#MinPanel2').click(function() { 
     var toggleWidth = $(".panel2").width() == 330 ? "66px" : "330px"; 
     $('.panel2').animate({ 
      width: toggleWidth 
     },function(){ 
      adjustPanel($('.panel1').width(), $('.panel2').width()) 
     }); 
    }); 


    adjustPanel = function(pan1, pan2) { 
    console.log($('.panels').width(), pan1, pan2); 
     var panelWidthTotal = $('.panels').width() - (pan1 + pan2) + 'px'; 

     $('.panel3').animate({ 
      width: panelWidthTotal 
     }); 
    } 

}); 

Answer 2

を作業コードです。これは、CSSのトランジションで動作し、ちょうどjsが少し書き直されています。なぜなら、コードにはdivの最終幅が必要であり、アニメーションが持続する間はそれを取得するものではないからです。あなたはあなたの中にあなたはjqueryのを使用していないいじることを知っている

$(document).ready(function() { 
 
    
 
    $('#MinPanel1').click(function() { 
 
     var toggleWidth = $(".panel1").width() == 225 ? "57px" : "225px"; 
 
     var toggleWidth1=toggleWidth; 
 
     $('.panel1').css({ 
 
      width: toggleWidth 
 
     }); 
 
     adjustPanel(); 
 
    }); 
 
    
 
    $('#MinPanel2').click(function() { 
 
     var toggleWidth = $(".panel2").width() == 330 ? "66px" : "330px"; 
 
     var toggleWidth2=toggleWidth; 
 
     $('.panel2').css({ 
 
      width: toggleWidth 
 
     }); 
 
     adjustPanel(); 
 
    }); 
 
    
 
    
 
    adjustPanel = function() { 
 
     var panelWidth1 = toggleWidth1; 
 
     var panelWidth2 = toggleWidth2; 
 
     var panelWidthTotal = panelWidth1 + panelWidth2; 
 
     
 
     $('.panel3').css({ 
 
      width: '-webkit-calc(100% - ' + panelWidthTotal + 'px)', 
 
      width: '-moz-calc(100% - ' + panelWidthTotal + 'px)', 
 
      width: 'calc(100% - ' + panelWidthTotal + 'px)' 
 
     }); 
 
    } 
 
    
 
});

*{ 
 
    box-sizing: border-box; 
 
} 
 
html, body{ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.actions{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    padding: 10px; 
 
    width: 100%; 
 
    background: white; 
 
} 
 

 
.actions button{ 
 
    margin-right: 10px; 
 
} 
 

 
.panels{ 
 
    height: 100%; 
 
} 
 
.panel1, .panel2, .panel3{ 
 
    height: 100%; 
 
    float: left; 
 
    /*-moz-transition-property: width; 
 
    -o-transition-property: width; 
 
    -webkit-transition-property: width; 
 
    transition-property: width; 
 
    -moz-transition-duration: 300ms; 
 
    -o-transition-duration: 300ms; 
 
    -webkit-transition-duration: 300ms; 
 
    transition-duration: 300ms;*/ 
 
} 
 

 
.panel1{ 
 
    width: 225px; 
 
    background-color: blue; 
 
    -webkit-transition: width 2s; /* Safari */ 
 
    transition: width 2s; 
 

 
} 
 

 
.panel2{ 
 
    width: 330px; 
 
    background-color: red; 
 
    -webkit-transition: width 2s; /* Safari */ 
 
    transition: width 2s; 
 
} 
 

 
.panel3{ 
 
    width: calc(100% - 555px); 
 
    background-color: darkgreen; 
 
    -webkit-transition: width 2s; /* Safari */ 
 
    transition: width 2s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="actions"> 
 
    <button id="MinPanel1">Minimize Panel 1</button> 
 
    <button id="MinPanel2">Minimize Panel 2</button> 
 
</div> 
 

 
<div class="panels"> 
 
    <div class="panel1"></div> 
 
    <div class="panel2"></div> 
 
    <div class="panel3"></div> 
 
</div>