jQuery的动画坑好多~

想要一个工具箱收回展开的动画，起初想要用css来实现，但是css的动态效果好像比较麻烦，所以搜了一下比较好用的动画插件，遂用到jQuery。
我的元素是一个大盒子套了多个小盒子，小盒子里面又有图片和文字（我这里用的都是<div>）。
期间遇见了几个问题：

1. 设置了大盒子css属性的toggle动画，看起来总是先出来五个，最后一个盒子总会慢点等宽度够了再显示

   • 发生原因：小盒子没有缩放，是否显示是根据大盒子的宽度来决定的，前面的出来的快意识不到，最后的时候出来很慢，所以会很明显
   • 解决方法：给小盒子也设置缩放动画，由于动画默认是顺序播放，因此需要在speed和ease后面设置queue: false（"queue:"可以省略)

   $("#Func_Button").animate({
       opacity: "toggle",
       height: "toggle",
       width: "toggle",
   }, "slow", "easeOutCubic", false);
   

2. 给小盒子加上了动画，但是最后居然竖着排列了，跑出去了

   • 发生原因："toggle"确实很方便，但是他的最终状态是display:inline而不是display:inline-block，所以会自动换行
   • 解决方法：避开toggle，通过判断当前display状态，控制css属性的动画目标参数

   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状态也可以，但是也还需要有别的调整，才让动画中间不出现奇怪的东西……

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