jquery动画忽略持续时间

我刚刚进入jquery，我对一些动画有点问题。我想要一个div在按下按钮时交替地增长和收缩。第一次按下按钮时。div适当收缩，需要500毫秒才能完成。然而，当再次按下按钮时，div会立即增长，不管我将其设置为500毫秒。我不知道我的问题可能在这里

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$(document).ready(function()
  {
   $("#Change").click(function()
     {
       if (!$("#displayable").is(".hidden"))
         {
           $("#displayable").animate({height:"0px"},500).addClass("hidden");
         } else {
           $("#displayable").animate({height:"100%"},500).removeClass("hidden");
         }
     });
  });
</script>

<div style="margin-top:8px; margin-bottom:8px;">
     <p><button id="Change">Change Div Size</button></p>
</div> 

<div class="main" id="displayable" style="display:block; overflow=hidden;">

     [other children elements]

</div>

$（文档）.ready（函数（）
{
$（“#更改”）。单击（函数（）
{
如果（！$（“#可显示”）。是（“.hidden”））
{
$（“#可显示”）.animate（{height:“0px”}，500）.addClass（“隐藏”）；
}否则{
$（“#可显示”）.animate（{height:“100%”），500.removeClass（“hidden”）；
}
});
});
更改分区大小

[其他儿童元素]

我可以看出，当animate命令增长div时，它确实会花费整个持续时间来做一些事情，因为如果我将其设置为非常大的值，则在增长的动画“完成”之前，我无法重新收缩div，即使它会立即在视觉上弹出

编辑：根据atmd建议，解决方案是在重置高度时不使用100%。这就需要在收缩之前获得高度，然后在收缩之后重新调整大小到该高度

<script>
$(document).ready(function()
  {
   $("#Change").click(function()
     {
       if (!$("#displayable").is(".hidden"))
         {
           $height = $("#displayable").height();  
           $("#displayable").animate({height:"0px"},500).addClass("hidden");
         } else {
           $("#displayable").animate({height:$height + 'px'},500).removeClass("hidden");
         }
     });
  });
</script>

$（文档）.ready（函数（）
{
$（“#更改”）。单击（函数（）
{
如果（！$（“#可显示”）。是（“.hidden”））
{
$height=$（“#可显示”）.height（）；
$（“#可显示”）.animate（{height:“0px”}，500）.addClass（“隐藏”）；
}否则{
$（“#可显示”）.animate（{height:$height+'px'}，500）.removeClass（“隐藏”）；
}
});
});

这些可能会有帮助这很有用，谢谢。我甚至没有想过改变100%来测试这是否是问题所在。我将在我的代码中找出如何解决这个问题，并发布我的解决方案。