CSS Transition for wrapper while showing / hiding / adding elements

Question 1

Regarding your edited question. Where you want to insert content or change content completely I made a new fiddle.

In this demo you have a button which when you click it adds two more Lorem Ipsum paragraphs to the wrapper div. It does it in a way that first animates the div to proper height and than adds the content. You can click on the button multiple times and each time it adds a new chunk of the demo content.

HTML markup: (thing you should notice here is that I have used a temporary container for the content with visibility set to hidden.)

<a href="#" id="change_content">Add content</a>
<div id="wrapper">
    <div class="content_box">
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei 
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
</div>
<div id="temp_content"></div><!-- Container for temporary content -->

CSS (just used bg colors here to make animation visible, and visibility: hidden for temporary container. Note that you can't use display: none because when measuring the height you would get 0)

#wrapper {background-color: orange;}

.content_box {width: 400px; background-color: green;}

#temp_content {width: 400px; visibility: hidden;}

jQuery (I have commented the code here)

$(document).ready(function() {

$('#change_content').click(function(e) {
    /*Some demo content here. Two new paragraphs wrapped in the div with content_box
      class. If it wasn't wrapped in the content_box class. In order to get correct
      height you should have temporary container width same as desired target
      container width so the content fills up properly.*/
    var new_content = '<div class="content_box"><p>Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
    est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
    consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p></div>';

    //insert the new content inside the temporary container.
    $('#temp_content').html(new_content);
    //calculate the temporary container height
    var new_content_height = $('#temp_content').height();
    //calculate current content height
    var existing_content_height = $('#wrapper').height();  
    //add two heights together
    var target_height = new_content_height + existing_content_height + 'px';        
     $('#wrapper').animate({
        height: target_height
      }, 1000, function() {
        //after the animation is over insert the content to the wrapper
        $('#wrapper').append(new_content);
        //its not obligatory but lets empty the temporary container
        $('#temp_content').empty();
      });    
});
});

Hope it helps.

Edit: had the wrong fiddle link. It points correctly now.

Question 2

I have made a jsFiddle here with a simple demo. It makes use of jQuery's slideUp() and slideDown() functions. Pressing links will show/hide div's and move slide the wrapper div appropriately, or you can add and element which is appended and slid down, along with the wrapper div.

HTML markup I used in the demo:

<ul class="buttons">
   <li><a href="#first_box">First box</a></li>
   <li><a href="#second_box">Second box</a></li>
   <li><a href="#third_box">Third box</a></li>
</ul>
<a href="#" id="add_element">Add Element</a>
<div id="wrapper">
   <div id="first_box">
      Got some cool content here.
   </div>
   <div id="second_box">
      Also some cool content.
   </div>
   <div id="third_box">
      And a third box.
   </div>
</div>

The CSS:

#wrapper {background-color: black;}

#first_box {width: 400px; height: 300px; background-color: green;}

#second_box {width: 400px; height: 300px; background-color: red; display: none;}

#third_box {width: 400px; height: 300px; background-color: blue; display: none;}

.new_element {width: 400px; height: 200px; background-color: orange; display: none;}

JQuery:

$(document).ready(function() {

  $('.buttons a').click(function(e) {
    e.preventDefault();
    var target_box = $(this).attr('href'); // get the target box id
    //check if box is currently visible or hidden
    if($(target_box).is(':hidden')) {
       //if div is hidden slide it down (show it) and wrapper slides down with it
       $(target_box).slideDown(1000);     
    } else {
       //if div is visible hide it by sliding it up, wrapper slides up with it
        $(target_box).slideUp(1000);
    }
  });    

  $('#add_element').click(function(e) {
    var new_div = $('<div class="new_element">New element</div>');
    $('#wrapper').append(new_div);

  });

});

Hope it helps.

Question 3

jQuery has a convenience function called slideDown that does the animation you want.

This finds the first hidden div and animates it down: http://jsfiddle.net/6rhqX/4/