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