jQuery: slideUp() delay() then slideDown; not working

jquery delay slideup slidedown
Ryan picture Ryan · Sep 30, 2010 · Viewed 30.8k times · Source

I'm trying to implement a very simple footer notification element to slide up for a moment, then slide back down. I'm using:

$('button').click( function () {
    $('#message-box').slideUp('slow').delay(1500).slideDown('slow');
});

However, when you click the button, it delays for the 1500 ms then slides up and never slides down.

http://jsfiddle.net/jrMH3/17/

Answer

Nick Craver picture Nick Craver · Sep 30, 2010

What you actually want is this:

 $('#message-box').slideDown('slow').delay(1500).slideUp('slow');

You can test it here. Though it seems a bit backwards given your layout, .slideDown() is for showing an element, and .slideUp() is for hiding an element...even though given your CSS it's actually going up when shown.

Also as an aside, you don't need <html> and <body> tags when editing the fiddle, these are already included...any content in the html frame will go inside the <body>.

Related questions

jQuery How to slideUp with delay?

I am using the following jQuery. A div box slides up, and then after 5 seconds, fades out. Is there a way to achieve this as it takes a long time for the box to appear. $(document).ready(function() { $("#load_limit").…

Read More
JavaScript sleep/wait before continuing

I have a JavaScript code that I need to add a sleep/wait function to. The code I am running is already in a function, eg: function myFunction(time) { alert('time starts now'); //code to make the program wait before …

Read More
Proper way to wait for one function to finish before continuing?

I have two JS functions. One calls the other. Within the calling function, I'd like to call the other, wait for that function to finish, then continue on. So, for example/pseudo code: function firstFunction(){ for(i=0;i<x;…

Read More