與jQuery動畫功能及絕對位置的效果

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