Show and hide effect of div element

Question

I have a div which should be hidden initially. Then on some event (doesn't matter) I want my div to slide up, stay for several seconds and slide down again. How could I achieve this.

Answer 1

You can use slideUp(), slideDown() and delay()

function anim() {
  $('div')
    // stop any previous animation
    .stop()
    // slide up the div
    .slideUp()
    // wait for 2 seconds
    .delay(2000)
    // slide down the div
    .slideDown();
}

anim();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height:100px;width:100px;background:black"></div>

---

Or using setTimeout() instead of delay()

function anim() {
  var $div = $('div')
    // stop any previous animation
    .stop()
    // slide up the div
    .slideUp();
  // wait for 2 seconds
  setTimeout(function() {
    // slide down the div
    $div.slideDown()
  }, 2000);
}

anim();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height:100px;width:100px;background:black"></div>