带有jquery animate函数和绝对位置的效果

Question

假设我有一个绝对位置 css {bottom:0px;} 的 div，那么我希望它折叠，我使用

$('#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。

但确实没有理由使用队列，这样更好：

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

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

当动画结束时，调用一个callback 函数来显示它。不涉及队列。

JSffidle 没有queue