使用动画最小化多个Div

Question

I'm trying to add an animation on the width property for my div .panels. Ive tried it in css with transition-property, and with .animate() , but it doesnt work. and I noticed that calc() is not working with jQuery animate...

The third panel should always have the subtraction of the other two width, so it can float on the right.

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

So any suggestion to make it work ? Thanks!

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 RESULT: JS FIDDLE

Answer 1

try this :

$( 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

Here is the working code. It works with css transition, and just has the js a bit rewritten because the code needs the final width of the divs and not the one it would grab while the animation lasts.

 $( 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>