jQuery滑动div

时间:2012-08-30 08:17:36

标签: 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>

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/

2 个答案:

答案 0 :(得分:5)

尝试在回调中使用它:

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

这是JSFiddle

答案 1 :(得分:4)

使用slideUp的回调函数:

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