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 });

使用dequeue修复JSFiddle。

但是没有理由使用队列，这更好：

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

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

动画结束后，调用显示它的callback函数。没有涉及队列。

JSffidle没有queue

jquery动画功能和绝对位置的效果

1 个答案: