Pull top div down to the bottom when bottom div disappears

Question

Currently, .div1 floats 50px above the bottom of the video frame. When .div2 (the controls bar) disappears, I want .div1 to move down and stick to the new bottom.

Just like how subtitles are handled by Netflix' video player, when the controls bar disappears, the subtitles should be "pulled" down to the bottom. That is what I am looking for. Test

body {
  background-color: gray;
  margin: 0 auto;
}
.out {
  width: 1000px;
  position: relative;
  height: 560px;
  background-color: #000;
  left: 50%;
  margin-left: -500px;
  top: 50%;
  margin-top: -280px;
}
.div1 {
  width: 100%;
  height: 50px;
  background-color: red;
  position: absolute;
  bottom: 50px;
}
.div2 {
  width: 100%;
  height: 50px;
  background-color: blue;
  position: absolute;
  bottom: 0;
}

<div class="out">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

Answer 1

By toggling the visibility of the blue div, you can also change the css bottom to move back and forth. I've put in a button to trigger the event, you can use whatever (hover something, click something else, etc.)

var flip = 0;
$('#btnChange').on('click',function(){
    $('.div2').toggle(0,function(){
        if(flip++ % 2 === 0){
            $('.div1').css("bottom", "0px");
        } else{
            $('.div1').css("bottom", "50px");
        }
    });
});

http://jsfiddle.net/acsvrzLf/