Question

Here are two examples that I have tried, neither of which work as intended.

http://jsfiddle.net/AndyMP/atyWW/1/ and http://jsfiddle.net/AndyMP/atyWW/4/

What I want to do is fade the top block out and animate/slide the lower block up. In the first example it jumps into place after the top block is hidden and in the second, it leaves a space at the bottom of the container DIV (presumably because I haven’t hidden the top DIV).

Any help would be very appreciated.

Answer 1

The problem is that your top is already 0 and so animating this is not doing anything, the reason its skipping up is because you are calling hide.

You could once the opacity of the top element has changed to 0 then modify the height of the top element as follows. I would also recommend using callbacks rather than delays, unless of course you need the second animation to start before the first has ended in which case stick with delays but the following code should give you an example of where you should go from here.

$(".disappear").click(function(){
    $(".top").fadeTo(250,0, function() {
        $(".top").animate({height:0},600);
    });
});

jsFiddle attached

Alternatively instead of hiding the top element and animating the height of the top element you could animate the margin-top of the bottom element.