javascript - jQuery滑动一个div

Question

我想向上滑动一个 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>

CSS：

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

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

jQuery：

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

演示：

http://jsfiddle.net/hFyvw/

Answer 1

尝试在回调中使用它：

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

这是一个JSFiddle

Answer 2

使用slideUp的回调函数：

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