javascript - 使用jquery animate的滑动效果

Question

下面是我的代码:

html:

<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>

CSS:

#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;}

js:

        $("#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"); 
          }
       });

JSFIDDLE

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

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

Answer 1

使用slideDown/Up 来显示pad 元素，不要等到slide 动画结束才开始pad 的动画

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

#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>