Geek Answers Handbook

How to make my div disappear with jQuery when the page loads?

I am new to jQuery (and javascript in general). I meant to use it / get to know it for some time and calls it time.

So, I'm going to use jQuery on this page to clear the "under construction" warning at the top of the load page. But I am not familiar with any functions or selectors.

I found this main article in jQuery, which has a demo that seems to work perfectly for what I am doing, only it is configured to disappear on click.

What do I need to change to make it disappear a few seconds after the page loads, and can you tell me where to look in order to learn more about these types of functions (in particular, on the jQuery website, if you are familiar). And please do not say, "In the documentation." Thank you, but not a mannequin, thank you. I'm just trying to find out more about this particular area of ​​the syntax responsible for the functions at the moment (if that's what they are called).

+4
source share
6 answers
$(document).ready(function() { window.setTimeout("fadeMyDiv();", 3000); //call fade in 3 seconds } ) function fadeMyDiv() { $("#myDiv").fadeOut('slow'); }
+7
source

New to jQuery 1.4 is the delay method. With his help:

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

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

 $(document).ready(function() { setTimeout(fade, 2000); } function fade(){ $("#tempwarning").fadeOut(1000); }
+2
source

Here is a complete example.

Just paste this into your 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">under development</a>. Please visit often. </p> </div> </div> </body> </html>

EDIT:

This line of code:

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

Expects the page to load before doing anything inside.

+2
source 
 $(document).ready(function(){ setTimeout(function(){ $("#tempwarning").fadeOut(); }, 2000); });
+1
source 
 <script> $(document).ready(function(){ window.setTimeout('fadeout();', 1000); }); function fadeout(){ $('.loader').fadeOut('fast', function() { // Animation complete. }); } </script>

Ideal for download page.

0
source

More articles:


All Articles