title: jQuery: blend in div-elements should smoothly expand auto-height of parent-div
body: <p>Still new to jQuery, so: quick question. I have a div that holds various objects for a responsive portfolio weblayout. At first only 3 objects are shown, the rest are <code>display: none;</code> via CSS. With a button these invisible objects can then be blended in via JavaScript. The code kind of looks like this:</p>
  
  <pre><code>$('#maindiv').click(function() {
      $(this).find('.objects').fadeIn();
  });
  </code></pre>
  
  <p>Works like it should, but since the <code>#maindiv</code> is set with <code>height: auto</code> in the CSS file, the height of the <code>#maindiv</code> just jumps as soon as the new objects begin to fade. A transition animation via CSS does not work apparenlty because of the <code>auto</code> value, which I need. So the question is: is there any way with JavaScript to make the height of the <code>#maindiv</code> somehow animate from the old auto-value to the new auto-value? Or something like that?</p>