ansaurus

Question

How to get my div to fade out with jQuery on page load?

Answer 1

+3 A:

$(document).ready(function() {
   window.setTimeout("fadeMyDiv();", 3000); //call fade in 3 seconds
 }
)

function fadeMyDiv() {
   $("#myDiv").fadeOut('slow');
}

JohnFx 2010-08-03 00:21:08

Couldn't get it to work - and not sure which parts of this to replace with my actual id. Just this piece?$("#tempwarning")

JAG2007 2010-08-03 00:26:53

Yes, if tempwarning is the ID attribute of the div you want to fade.

JohnFx 2010-08-03 00:30:37

OK, working now. I think I had an error in my link to the jQuery library.

JAG2007 2010-08-03 00:35:27

BTW, how do I know where to place my scripts? It seems like some belong in the head, and some right before the ending body tag?

JAG2007 2010-08-03 00:57:14

Scripts load one at a time. Since you're using the $(document).ready, then you can put your scripts at the end (in this case). Just make sure that the jquery library is placed before your function. A good rule of thumb is to actually try and get as much of your scripts at the bottom as possible.

rockinthesixstring 2010-08-03 01:12:49

Answer 2

+1 A:

Hey, the site looks cool. This should do it for you.

$(document).ready(function() {
    setTimeout(fade, 2000);
}

function fade(){
   $("#tempwarning").fadeOut(1000);
}

Derrick 2010-08-03 00:21:41

Isn't working. It's there now, but not doing anything.

JAG2007 2010-08-03 00:27:12

Ok, I think I might have had an error in my link to the jQuery library. Thanks for your answer.

JAG2007 2010-08-03 00:50:25

No problem. You may want to check into firebug, or firebug lite. ;)

Derrick 2010-08-03 10:38:04

I might also suggest that you use a specific version from the Google API CDN : http://code.google.com/apis/libraries/devguide.html#jquery

Derrick 2010-08-03 11:26:54

Answer 3

A:

$(document).ready(function(){
    setTimeout(function(){ $("#tempwarning").fadeOut(); }, 2000);
});

You 2010-08-03 00:22:26

This won't pause for a few seconds before fading out as specified by the OP

JohnFx 2010-08-03 00:26:42

So much for only reading the title.

You 2010-08-03 00:28:37

That's why there is an edit button. =)

JohnFx 2010-08-03 00:31:26

Answer 4

+2 A:

Here's a complete example.

Just paste this into an html file and save it.

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js" />
    <script>
    $(document).ready(function(){   
        window.setTimeout('fadeout();', 3000);
    });

    function fadeout(){
        $('#tempwarning').fadeOut('slow', function() {
           // Animation complete.
        });
    }

    </script>
</head>
<body>
    <div id="tempwarning">

        <div class="wrap">

            <span class="warning-icon">!</span>

            <p>
                Oops! Please pardon my appearance. I'm still <a href="http://graphicriver.net/item/under-construction-graphic/53758?ref=jglovier"&gt;under development</a>. Please visit often.
            </p>

        </div>

    </div>
</body>
</html>

EDIT:

This line of code:

 $(document).ready(function() { });

Waits for the page to load before executing anything inside it.

Brandon Boone 2010-08-03 00:23:40

You still need code that waits a few seconds before fading.

JohnFx 2010-08-03 00:31:11

Very true, I missed that part in the question. Great answer by the way!

Brandon Boone 2010-08-03 00:38:55

Answer 5

+4 A:

New to jQuery 1.4 is the delay method. Using it for this purpose:

$("#myDiv").delay(3000).fadeOut("slow");

cnanney 2010-08-03 00:55:18

Awesome, taught me something new!

Brandon Boone 2010-08-03 01:06:01

delay is great for this :)

Alastair Pitts 2010-08-03 01:09:02

ansaurus

tags:

views:

answers:

How to get my div to fade out with jQuery on page load?

related questions