Question

Guys I’ve seen jQuery: slideUp() delay() then slideDown; not working, I exactly coded:

$('.flash_message').slideDown(800).delay(5000).slideUp(1000);

but the slideDown doesn’t seem to work.

In other words:

“$(‘.flash_message’).slideDown(800).delay(5000).slideUp(1000);`

and

$('.flash_message').delay(5000).slideUp(1000);

are producing the same result!

---

PHP code that generates .flash_message element: (I use codeigniter)

if ($this->session->flashdata('message_array'))
{
    foreach($this->session->flashdata('message_array') as $message)
    {
        echo "<div class='flash_message {$message[0]}'>{$message[1]}</div>";
    }
}

---

Sample HTML generated:

<div class="flash_message success">Event added successfully.</div>

---

Updated: I GOT THE PROBLEM:

slideDown doesn’t work at all

$('.flash_message').slideDown(800);

doesn’t do anything!

Answer 1

You should place the delay and the slideUp into the callback of the initial slideDown function

Code in the callback will be executed once the slideDown has finished.

Heres a jsfiddle – http://jsfiddle.net/FK2Fd/1/

$(function(){

    $('.flash_message').slideDown(800, function(){
       $(this).delay(500).slideUp(1000); 
    });

});