div .panelsのwidthプロパティにアニメーションを追加しようとしています。私は遷移プロパティ、と.animate()でCSSで試しましたが、うまくいきません。 と私は、calc()がjQueryアニメーションと連動していないことに気付きました。アニメーションで複数のDivを最小化する
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
? –
彼はjqueryを持っていますが、外部リソースとして –