Minimize multiple Div with animation

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

});