Question

I want to slide a div up, and after it has slided up completely, I want to slide the other <div> down (which is by default hidden).

I am trying following code, it does what I want, but I only don’t get the effect that the div slides down after the first has slided up completely, it looks like the div starts appearing as soon the other div starts sliding above.

So how can I make it wait till the first div slides up completely and then it starts sliding down.

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

Demo:

http://jsfiddle.net/hFyvw/

Answer 1

Use the callback function of slideUp:

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