change inline-block container height smooth

Question

https://jsfiddle.net/4a64jso1/1/

.a and .b are inline-block with different height in a container after click .a ,
.a expand width to 100%, .b height to 0, that means container only can see .a and container height will change to .a height.

my problem is how to make the container height change not look like flash, bounce .... make it smooth ... ?
I tried to add transition in container too but not work, I think because I don't set container height, but I don't want to set container height.

 $('.a').on('click', function() { $('.container').addClass('expand'); }) $('.back').on('click', function() { $('.container').removeClass('expand'); }) 

 .container { width: 400px; overflow: hidden; font-size: 0; white-space: nowrap; } .container >div { display: inline-block; vertical-align: top; font-size: 12px; } .a { width: 200px; height: 100px; background-color: blue; -webkit-transition: width 0.45s; transition: width 0.45s; } .b { width: 200px; height: 1000px; max-height: 99999px; background-color: red; -webkit-transition: max-height 0.45s; transition: max-height 0.45s; } .container.expand .a { width: 100%; } .container.expand .b { max-height: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="back">back</div> <div class="container"> <div class="a">a</div> <div class="b">b</div> </div> <div class="other">other</div> 

Answer 1

If I understand your question correctly, you could add $('.b').slideUp(400); in your function.

EDIT: and, of course $('.b').slideDown(400); to bring it back down.

Answer 2

U can use Jquery.animate

$( "#a" ).click(function() {
    $( "#b" ).animate({
        height: "100%"
      }, 1000, function() {
        // Animation complete you can do something here aswell.
      });
    });

Btw if u want ui bounce or something use: for animation swing/bounce etc or not. https://jqueryui.com/

This will explain why you should use it or not ;) https://www.google.com/design/spec/motion/material-motion.html