jquery $.slideUp() works well, but $.slideDown() doesn't work at all

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!

What kind of html element is .flash_message? (maybe a good idea to post the HTML too) — mbx-mbx, Jan 27 '12 at 15:34
Thank you. I don't believe but it might be important. At least if you know what is happened, may make you more sure about the its content. — Mohammad Naji, Jan 27 '12 at 15:37
What do you mean by "producing the same result"? The last example isn't producing anything since you first delay and then hide. The first example shows the div first and the hides it. — Niklas, Jan 27 '12 at 15:42
@Niklas No Niklas, By "producing the result" I mean generating HTML. In the example above: `
Event added successfully.
` — Mohammad Naji, Jan 27 '12 at 15:45
Would you be able to reproduce the error here? http://jsfiddle.net — Niklas, Jan 27 '12 at 15:49
Sorry about my previous comment. I don't delete it for others to not be confused. That I said "are producing the same result", I mean that the code `$('.flash_message').slideDown(800).delay(5000).slideUp(1000);` and `$('.flash_message').delay(5000).slideUp(1000);` do not differ at all. They give the same result. The function "`.slideDown`" doesn't do anything. It doesn't differ whether to put it in the code or put it not. Sorry for my terrible english — Mohammad Naji, Jan 27 '12 at 19:52
And the problem is exactly that. As I updated my question, it looks that `$('.flash_message').slideDown(800);` doesn't work at all. — Mohammad Naji, Jan 27 '12 at 19:56
Is your code in a document ready function? Such as: `$(document).ready(function() { // code here });` — Mike Lentini, Jan 27 '12 at 20:03
@MikeLentini Yes; here it is: `$(document).ready(function(){/*$('.flash_message').slideDown(800, function() { $(this).delay(500).slideUp(1000); })*/ $('.flash_message').slideDown(1000); });` — Mohammad Naji, Jan 27 '12 at 20:06

score 2 · Accepted Answer · answered Jan 27 '12 at 15:37

2

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

});

answered Jan 27 '12 at 15:37

Damon Skelhorn

1,491
11
18

So why does http://jsfiddle.net/nick_craver/JDfae/ works with code: `$('#message-box').slideDown('slow').delay(1500).slideUp('slow');` ? – Mohammad Naji Jan 27 '12 at 15:47
I don't know why, but I've seen that the problem with my own Firefox! Though I use the latest version (in ubuntu). Thanks any way. I accept your answer anyway. – Mohammad Naji Mar 06 '12 at 09:46

jquery $.slideUp() works well, but $.slideDown() doesn't work at all

1 Answers1