Javascript 使用jqueryanimate的滑动效果

下面是我的代码：

html:

js:

当我按下链接时，一个灰色的div将向上滑动。有点像用户按下链接时向上滑动的键盘

---

但看起来有点奇怪。“pad”div仅在灰色div向上滑动后显示。它只有在滑下后才会隐藏。我想要的是“pad”具有向上滑动和向下滑动的效果，就像打开和关闭抽屉一样。有什么想法吗？

使用slideDown/Up来显示

pad

元素，不要等到幻灯片动画完成后才开始

pad

$（“#幻灯片”）。单击（功能（e）{
e、 预防默认值（）；
if（$（“#div2”）.hasClass（“切换”））{
$（“#div2”）。设置动画({
“高度”：“100px”
}).removeClass（“切换”）；
$（“#pad”）.slideUp（）；
}否则{
$（“#div2”）。设置动画({
“高度”：“40px”
}).addClass（“切换”）；
$（“#pad”）.slideDown（）；
}
});
#第1部分{
宽度：150px；
高度：50px；
背景色：红色；
}
#第二组{
宽度：150px；
高度：100px；
背景颜色：黄色；
}
#第三组，
#垫{
宽度：150px；
高度：20px；
背景颜色：灰色；
}
#垫{
高度：50px；
}

12345
67890
1234567890
是。太棒了！我不知道有没有这个slideUp（）和slideDown（）功能。
<div>
    <div id="div1">12345</div>
    <div id="div2">67890</div>
    <div id="div3"><a href="#" id="slide">abcde</a></div>
    <div id="pad" style="display:none;">1234567890</div> 
</div>

#div1{width: 150px; height:50px; background-color: red;}
#div2{width: 150px; height:100px; background-color: yellow;}
#div3, #pad{width: 150px; height:20px; background-color: grey;}
#pad{height: 50px;}

        $("#slide").click(function(e) {
         e.preventDefault();
          if($("#div2").hasClass("toggled")) {
             $("#div2").animate({"height": "100px"}, function() {
                 $("#pad").hide();}).removeClass("toggled"); 
          } 
          else {
            $("#div2").animate({"height": "40px"}, function() {
            $("#pad").show();}).addClass("toggled"); 
          }
       });