JQuery: Animate the height of an .appended element

Question

I am appending multiple divs on click and I need the containing element to slowly increase in height to accommodate the newly appended divs rather than instantly jumping to their new height. I've been trawling stackoverflow and the web but can't seem to find an answer; at least not one that I can implement with my limited knowledge in jquery.

I had assumed the best way to do it was to animate the height of the appended div from 0px to 40px (or whatever height) before the .fadein??

$("#Addrow1").click(function () {
    var agi = 1;
    $('.item').each(function () {
        agi++;
    });
    $("#livingX").append('<div class="something"><input class="item" placeholder="Item Name" name="LIVFUR' + agi + '" type="text" style="width:200px;"/></div>').children(':last').hide().fadeIn(500);
    return false; 
});

Here's the JSFiddle

When you click the button the new element is appended nicely with a fadein but the button (and the container in the actual implemenetation) all jump down to their new position/height. How can I fix this?

Any help would be very much appreciated.

Answer 1

You'll need to get the height before and after you append the new content. Set the height to the height before and then animate it to the resulting height:

$("#Addrow1").click(function () {
    var agi = 1;
    $('.item').each(function () {
        agi++;
    });

    // height before added content
    var heightBefore = $('#livingX').height();

    // append the content and remove inline-styling 
    $("#livingX").append('<div class="add-container"><input class="item" placeholder="Item Name" name="LIVFUR' + agi + '" type="text" style="width:200px;"/></div>').removeAttr('style');

    // height after added content
    var heightAfter = $('#livingX').height();

    // set the height to the original height, then animate it to the new height
    $('#livingX').css('height',heightBefore).animate({height: heightAfter}, 500);
    return false;

});

Fiddle

Answer 2

Try .find('.add-container:last').hide().slideDown(500) instead of .children(':last').hide().fadeIn(500) :

$("#Addrow1").click(function () {
    var agi = 1;
    $('.item').each(function () {
        agi++;
    });
    $("#livingX").append('<div class="add-container"><input class="item" placeholder="Item Name" name="LIVFUR' + agi + '" type="text" style="width:200px;"/></div>').find('.add-container:last').hide().slideDown(500);
    return false;
});

jsFiddle example

Or to hide while sliding, then fade in (as illustrated in the fiddle in the comments below) use:

$("#livingX").append('<div class="add-container"><input class="item" placeholder="Item Name" name="LIVFUR' + agi + '" type="text" style="width:200px;"/></div>').find('.add-container:last').hide().css('opacity', 0).slideDown(500, function () {
    $(this).fadeTo('slow',1);
});