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

предположим, у меня есть 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/


jquery absolute jquery-animate
person hh54188    schedule 29.01.2012    source источник
comment
Я уверен, Вам понравится читать это   -  person gdoron is supporting Monica    schedule 29.01.2012

Ответы (1)


arrow_upward
1
arrow_downward

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

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

Исправлено JSFiddle с удалением из очереди.

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

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

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

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

JSffidle без queue

person gdoron is supporting Monica    schedule 29.01.2012
comment
спасибо за решение моей проблемы. Но я до сих пор не совсем понимаю, зачем мне удаление из очереди, как это повлияет на распоряжение? - person hh54188; 29.01.2012
comment
@hh54188. Прочитайте документы JQuery в очереди. Обратите внимание, что при добавлении функции с помощью .queue() мы должны убедиться, что .dequeue() в конечном итоге вызывается, чтобы выполнялась следующая функция в строке. - person gdoron is supporting Monica; 29.01.2012