Эффект с помощью функции jquery animate и абсолютной позиции

Question

предположим, у меня есть div с абсолютной позицией css {bottom:0px;}, затем я хочу, чтобы он свернулся, я использую

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

очевидно, что он падает сверху вниз, что означает фиксированное дно, сверху вниз.

Далее я хочу, чтобы оно было расширено с фиксированным верхом, перемещено нижним, поэтому я пишу:

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

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

но не тратит, так что не так с моим кодом

спасибо

вот мой онлайн пример: http://jsfiddle.net/hh54188/pngK4/

Answer 1

Поскольку вы помещаете анимацию в очередь, вам нужно использовать dequeue.

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

Исправлено JSFiddle с dequeue.

Но на самом деле нет причин использовать очередь, это лучше:

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

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

Когда анимация закончится, вызовите функцию callback, которая ее отображает. Очередь не включена.

JSffidle без queue