JavaScript Forum

**Zoltar1992** · 04-22-2009, 04:58 PM

I want the following script to fade in when the page loads.. but it doesn't seem to work. What could be wrong?

HTML Code:

<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
  $(document).ready(function(){
    
    $("div").load(function () {
      $("div:hidden:first").fadeIn("slow");
    });

  });
</script>

<style type="text/css">
div
{
}
div#one
{
margin-left: 15%;
}
div#two
{
margin-top:-3.7%; margin-left:70%;
}

</style>

</head>

<body>
<br><br><br><br>
<br><div id="one">
<span style="font-size: 25"><b>Who</b></span>
<br>
<i> &nbsp;I am </i>
</div>

<div id="two">
<span style="font-size: 25"><b >What</b></span><br>
<i> I've done </i>
</div>
</body>
</html>

**wayfarer07** · 05:10 PM

When the .load method is used on an HTML element, it is an AJAX call. If you use it on the window, however, it is a page load event, exactly like the normal JavaScript onload event, except that it may appear in multiple places throughout the script:

Code:

$(window).load(function() {
//do stuff
});

Note that there is no need to put this inside of the $(document).ready(), which is a separate loading event. $(document).ready() waits for the HTML to load, but not the images. $(window).load() will wait for all of the images to load, in addition to the HTML.

**Zoltar1992** · 04-22-2009, 08:31 PM

Thanks, yeah that makes sense... but the script still doesn't work.

$(window).load(function () {
$("div:hidden:first").fadeIn("slow");
});

is what I put in instead.

**wayfarer07** · 04-22-2009, 10:43 PM

Why don't you hide the divs first? You can't fade in something that isn't hidden first.

**Zoltar1992** · 03:50 PM

Ah... yep.
Works perfectly! thanks so much!
Althought I've run into another problem... Jquery's documentary isn't very clear about the proper syntax for 'effects' like explode...
How would I correctly format the following?

HTML Code:

 $(window).load(function(){
 $("p").fadeIn("slow", function() {$("p").click(function () {
      $("p").hide("explode", {}, 1000, function() {
      $("div").fadeIn("slow");
    }); 
});});
});