想要一個工具箱收回展開的動畫，起初想要用css來實現，但是css的動態效果好像比較麻煩，所以搜了一下比較好用的動畫外掛，遂用到jQuery。
我的元素是一個大盒子套了多個小盒子，小盒子裡面又有圖片和文字。
期間遇見了幾個問題：
1.設定了大盒子css屬性的toggle動畫，但是小盒子沒有這個動畫，所以肉眼可見的時候是五個，然後等大盒子的寬度width夠了才會出現第六個小盒子。
  解決方法：給小盒子也設定動畫，但動畫預設是順序播放，因此需要在speed和ease後面設定queue: false（"queue:"可以省略）

2."toggle"確實很方便，但是他的最終狀態是display:inline

if ($("#Func_Pad").css("display") == "none") {
    $("#Func_Pad").animate({
        opacity: "toggle",
        height: "toggle",
        width: "toggle",
    }, "slow", "easeOutCubic", false);
    $(".Func_Button").animate({
        width: 90,
        height: 125
    }, "slow", "easeOutCubic", false);
    $(".Func_Button img").animate({
        width: 60,
        height: 60
    }, "slow", "easeOutCubic", false);
} else {
    $("#Func_Pad").animate({
        opacity: "toggle",
        height: "toggle",
        width: "toggle",
    }, "slow", "easeOutCubic", false);
    $(".Func_Button").animate({
        width: 0,
        height: 0
    }, "slow", "easeOutCubic", false);
    $(".Func_Button img").animate({
        width: 0,
        height: 0
    }, "slow", "easeOutCubic", false);
 

3.快速多次點選的時候，動畫需要等待結束後，才會繼續，不是很靈活。想要跟手的效果，需要讓動畫可以停下來，使用stop()(可以設定兩個引數，第一個是停止該元素所有動畫，第二個是立即到達動畫本應該到的位置)可以停止動畫，但是這個時候，因為我們第二點中通過判斷display狀態來控制，所以height:"toggle"會自動切換而height:50認為當前仍然是display!="none"所以不停下來，這太愚蠢了。所以我把判斷語句改成了自己設定的引數Disp_Stat，每次動畫切換狀態就可以，這樣就不用考慮display和toggle的關係了。當然如果有能控制toggle最後狀態的方法，或者直接暴力切換display

如果你有更好的方案，歡迎留言~