Javascript jQuery滑动一个div

我想向上滑动一个div，在它完全向上滑动后，我想向下滑动另一个

（默认情况下是隐藏的）

我尝试下面的代码，它做我想要的，但我只是没有得到的效果，该div下滑后，第一个已经完全向上滑动，它看起来像一个div开始出现时，另一个div开始向上滑动

那么，我怎样才能让它等到第一个div完全向上滑动，然后开始向下滑动呢

HTML:

<div class="box">
    <div class="up"></div>
    <div class="down"></div>
</div>

<a href="#" id="hidediv">Hide me</a>

.up{
    width: 100px;
    height: 100px;
    background: orange;
    display: block;
}

.down{
    width: 100px;
    height: 100px;
    background: red;
    display: none;
}

$("#hidediv").click(function () {
  $(".up").slideUp(800);
  $(".down").slideDown(800);
}); 

jQuery:

<div class="box">
    <div class="up"></div>
    <div class="down"></div>
</div>

<a href="#" id="hidediv">Hide me</a>

.up{
    width: 100px;
    height: 100px;
    background: orange;
    display: block;
}

.down{
    width: 100px;
    height: 100px;
    background: red;
    display: none;
}

$("#hidediv").click(function () {
  $(".up").slideUp(800);
  $(".down").slideDown(800);
}); 

演示：

<div class="box">
    <div class="up"></div>
    <div class="down"></div>
</div>

<a href="#" id="hidediv">Hide me</a>

.up{
    width: 100px;
    height: 100px;
    background: orange;
    display: block;
}

.down{
    width: 100px;
    height: 100px;
    background: red;
    display: none;
}

$("#hidediv").click(function () {
  $(".up").slideUp(800);
  $(".down").slideDown(800);
}); 

---

使用slideUp的回调函数：

$("#hidediv").click(function () {
  $(".up").slideUp(800, function () {
    $(".down").slideDown(800);
  });
});

---

使用slideUp的回调函数：

$("#hidediv").click(function () {
  $(".up").slideUp(800, function () {
    $(".down").slideDown(800);
  });
});

---

尝试在回调中使用它：

$("#hidediv").click(function () {
  $(".up").slideUp(800, function () {
    $(".down").slideDown(800);
  });
});

---

下面是一个

尝试在回调中使用它：

$("#hidediv").click(function () {
  $(".up").slideUp(800, function () {
    $(".down").slideDown(800);
  });
});

---

这是一个

是的，谢谢阿德里安；-）每个缩进4个空格有什么不对？似乎默认情况下也是如此。你说的那个阿德里安是谁？是的，谢谢阿德里安；-）每个缩进4个空格有什么不对？默认情况下似乎是这样。你说的阿德里安是谁？这是一个格式非常好的问题，不确定“隐藏我”是你的最终文本还是完整的功能是什么，但我只是想，如果访问者真的想通过单击“隐藏我”来摆脱这个框，那可能会让他们感到恼火，然后另一个盒子正好在它的位置滑动。@Joonas不，我只是为这个例子写的。我没有任何显示/隐藏的链接。这是一个格式非常好的问题，不确定“隐藏我”是不是你的最终文本，或者完整的功能是什么，但我只是想，如果访问者真的想通过单击“隐藏我”来摆脱这个框，这可能会让他们感到恼火，然后另一个盒子正好在它的位置滑动。@Joonas不，我只是为这个例子写的。我没有任何显示/隐藏的链接。谢谢Vishal，我接受了@m7o答案，因为这两个答案都是相同的，但他在10秒前回答：）谢谢Vishal，我接受了@m7o答案，因为这两个答案都是相同的，但他在10秒前回答：）