Эффект с функцией JQuery одушевленного и абсолютное положение

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