CSS Transition for wrapper while showing / hiding / adding elements

Question

I have a div which contains some elements that are hidden and some that are visible.

Now when i show one of the hidden elements (or hide a visible one) the height of the wrapping div changes. I also may add new elements to the div.

Example:

<div class="wrapper">
    <div id="inner1">Hallo1</div>
    <div id="inner2">Hallo2</div>
    <div id="inner3">Hallo3</div>
</div>

Now i want to animate the change of height of the wrapping div.

I played arround with jquery effects and css3 transitions but i could get it to work ..

Edit: here a fiddle as example of what i have:

http://jsfiddle.net/6rhqX/2/

Now i want to "smooth out" the wrapper when new elements appear.

Edit: Maybe i oversimplyfied my my question and forget to mention some things ..

I don't want to animate the inner divs, i want to to animte the wrapper "automaticly" whenever something in it is removed / added / hiden / shown.

For example i want to be able to "swap" the whole content of the div with other content, and want to have the change to the new height be animated...

Answer 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.