0

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/

gdoron
  • 147,333
  • 58
  • 291
  • 367
hh54188
  • 14,887
  • 32
  • 113
  • 184

1 Answers1

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

Sevle
  • 3,109
  • 2
  • 19
  • 31
gdoron
  • 147,333
  • 58
  • 291
  • 367
  • thank you for solving my problem.But I still don't quite understand why I need the "dequeue",how it effect the executive order? – hh54188 Jan 29 '12 at 12:10
  • @hh54188. Read JQuery [docs](http://api.jquery.com/queue/) on queue. _"Note that when adding a function with .queue(), we should ensure that .dequeue() is eventually called so that the next function in line executes."_ – gdoron Jan 29 '12 at 12:35