Stack two divs and slide one after another is removed w/jQuery

I have a div (div1) that is position in the bottom-right corner. When div1 is clicked it is removed with jQuery.

I would like to position another div (div2) right over div1 and after the first div is removed, I want the second div slide down, where the first one used to be.

Here's my DEMO.

You could do this :

$(function() {
    $(".div2").css({
        // places .div2 right above .div1
        bottom: $(".div1").outerHeight() + "px"
    });
    $(".div1").click(function() {
        $(".div1").fadeOut("slow", function() {
            $(this).remove();
            $(".div2").animate({
                bottom: "0px" // slides .div2 down
            });
        });
    });
}

jsFiddle example here

Um... I'm not totally clear on your question, but is this what you want?

http://jsfiddle.net/X7XVa/

If #div2 doesn't exist yet:

$('#div1').slideUp(300, function(){
    $(this).before('<div id="div2">Content</div>');
    $(this).remove();

    $('#div2').slideDown(300);
});

Or, if you already have #div2 on the page:

$('#div1').slideUp(300, function(){
    $(this).before('#div2');
    $(this).remove();

    $('#div2').slideDown(300);
});