The following code demonstrates what happens when you click on the "Powered" text at the bottom of the screen (line by line):

1. Search for the "power" id in the html document and attach a click handler to it.
2. Search for that same "power" id and then fade it out at a speed of 500 milliseconds.
3. Use "this" to represent the '#power' section in the previous function, and then fade it in "slow".
4. Search for "p" tag with an id of "second" and replace that with your own custom html.
5. Search for the same id and fade it out.
6. Close the function with $(this) at the start.
7. Close the second $('#power') function.
8. Use "return false" so that you when you click it doesn't bring you to the top of the page (which it would normally do).
9. Close out the original $('#power') function.

      $('#power').click(function() {
        $('#power').fadeOut(500, function() {
          $(this).fadeIn('slow', function() {
            $('p#second').replaceWith('<p id="second"><b class="highlight">Animation complete!</b></p>');
            $('p#second').fadeOut(1500);
          });
        });
        return false;
      });
      

When the page loads, the header fades in.

1. Search for the "header" id in the html document, set its initial css display state to none, then fade it in.

      $('#header').css("display", "none").fadeIn(3000);
      

I have chained this line together. When I first created it I had the following:

      $('#header').fadeIn(3000);
      

When I did it this way, I also had the "header" id's css set to: display: none;

I realized though that when someone has JavaScript turned off in their browser, they couldn't see a header at all.

By chaining this code together, I can set the css property to 'none' through jQuery and then fade it in. This way, everyone can see the header and JavaScript users get an added treat.