Search code examples
javascripthtmlfadein

fadeIn onLoad function


So, Im trying to get this id to fade in on the load of the page. I've seen the posts about fade in. However, I haven't found any related to an onLoad function. Could anyone help me out with this?

HTML:

 <div id="intro"> HELLO, I AM </div>

Javascript:

$( "#intro" ).onLoad(function() {
  $( "#intro" ).fadeIn( "slow")
});

Solution

  • There's no such jQuery function as onLoad. Also, you'll probably want to set the default display of your element to "none" using CSS. And, as @Andreas commented, you would then put the $.fadeIn() call in a $(document).ready() callback, so it only executes once the DOM is loaded. So, all together now:

    HTML:

    <div id="intro"> HELLO, I AM </div>
    

    CSS:

    #intro {
      display: none;
    }
    

    JS:

    $(document).ready(function() {
      $("#intro").fadeIn("slow");
    });