javascript setTimeout or jquery delay - neither are working for me

I have a div like this

<div id="sale">
    ........
</div>

and I tried to use both

$('#sale').delay(3000).slideDown(500);

and

setTimeout(sale(), 3000);

function sale() {
    $('#sale').slideDown(500);
}

but neither of them are working. The jQuery delay says $('#sale').delay() is not a function while the setTimeout way says useless setTimeout call (missing quotes). If I add double quotes around the sale() call, it just says "Sale is not defined".

Why won't either of these work?

All I'm trying to do is make a div ap开发者_开发技巧pear 3 seconds after the page is loaded.

In case of setTimeout you're simply doing it wrong.

setTimeout(sale(), 3000); // will call sale and use the RETURN value in the callback but sale returns undefined

You need to pass in a function:

function sale() {
    $('#sale').slideDown(500);
}

setTimeout(sale, 3000); // just pass in the reference to sale()

Other possibility:

// no difference in this case
// Note: if it were obj.sale() then you would need to do this version
//       otherwise sale() will get called with the this set to window
setTimeout(function(){sale()}, 3000) 

And last but not least:

setTimeout(function() { $('#sale').slideDown(500); }, 3000);

You need to be in a queue for delay() to work.

$('#sale').queue(function() {

   $(this).delay(3000).slideDown(500).dequeue();

});

See it.

Patrick Dw has informed in the comments you don't need to be in a queue() if your next method chain is an animation. See his JSFiddle.

setTimeout(sale, 3000);

Before, you were passing setTimeout the return value from sale. This passes the actual function.

In your first solution it seems that jQuery is not even loaded.

In the second code you have to do setTimeout(sale, 3000); (omit the parentheses) because with them you are calling setTimeout with the return of sale(), which is undefined.

setTimeout("sale();", 3000);