Question

suppose I have a div with absolute position css {bottom:0px;} ,then I want it collapse,I use

$('#id').animate({ height: "0" }, { duration: 1000 });

obviously it collapse from top to bottom,which means bottom fixed,top come down.

Next I want it expand with top fixed ,bottom moved,so I write:

$('#id2').animate({ height: "0" }, { duration: 1000 }).queue(function () {

    $('#id2').css({ top: '0' }).animate({ height: "50" }, { duration: 1000 });
});

but it doesn’t expend,so what’s wrong with my code

thank you

here is my online example:
http://jsfiddle.net/hh54188/pngK4/

Answer 1

Because you put the animation in a queue you need to use dequeue.

$('#id2').dequeue().css({ top: '0' }).animate({ height: "50" }, { duration: 1000 });   

Fixed JSFiddle with dequeue.

But there is really no reason to use queue, this is better:

    function x() {
    $('#id2').css({
        top: '0'
    }).animate({
        height: "50"
    }, {
        duration: 1000
    });
}

$(function() {
    $('#id2').animate({
        height: "0"
    }, {
        duration: 1000,
        complete: x
    });    
});

When the animation is over, call a callback function that display it. No queue involved.

JSffidle without queue