title: jQuery animate height simultaneously on stacked elements
body: <p>I'm trying to find out how I can animate the height of stacked elements like in this example: <a href="http://jsfiddle.net/QtrDj/" rel="nofollow">http://jsfiddle.net/QtrDj/</a> without having that "vibration" on the bottom. </p>
  
  <p>When you click the red bar, you see that the bottom of the bottom blue bar does not stay in place. What I would like to animate is the height of the two elements but without changing the sum of their height.</p>
  
  <p>I guess the problem is that at some point during the animation the calculated value rounds to a smaller/larger value.</p>
  
  <p>Can I prevent this with jQuery?</p>
  
  <p>I found other questions with simultaneous animation and they all said queue but actually I'm looking for something else not just simultaneous but also with extra constraints. This is what I tried:</p>
  
  <pre><code>var one = jQuery(".one").animate({
      height: equal ? 50 : 150
  }, {
      queue: false
  }).promise();
  
  var two = jQuery(".two").animate({
      height: equal ? 150 : 50
  }, {
      queue: false
  }).promise();
  
  jQuery.when(one, two).done(function () {
      equal = !equal;
  });
  </code></pre>
  
  <p>Thanks,
  Norbert</p>