Fade Out after .delay() of 5 seconds

Question

I'm trying to make a section of my site fadeIn after 5 seconds using the following:

$('#topScroll').delay(5000).fadeIn(400);

I can't seem to get it to work. Does this need to be hooked to an event? I see that doing the same with fadeOut works just fine with no event.

<div id="topScroll">
    <a class="scroll">Scroll<br /><img src="images/scroll.png" alt="scroll" /></a>
</div>

I thought perhaps the div needed to be display:none first before it can fade in, but this doesn't seem to make a difference.

Answer 1

Try this: $('#topScroll').hide().delay(5000).fadeIn(400);

Your div is already visible, so you might as well hide it again for fadeIn() to perform.

fadeOut() works because topscroll is already visible. reference: http://api.jquery.com/fadeout/

Answer 2

I'm an amateur, but this works for me....

function FadeToZero()
{
    $(".myBox").children().delay(5000).fadeOut(800);    
}