Creating A Simple Fade In Effect On Page Load With jQuery

A jQuery solution provides a simple way to create a fade in/out effect on page load that can be apply on the entire page or a specific element.

Basic Usage:

1. Include the jQuery javascript library on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. The jQuery script.

(function($) {
$.fn.pagefade = function(fadein, fadeout) {
        this.css("display", "none");
        this.fadeIn(fadein);
  $("a").click(function(event) {
event.preventDefault();
linkLocation = this.href;
this.fadeOut(fadeout, redirectPage);
  });
  function redirectPage() {
window.location.disabled= linkLocation;
  }
  return this;
};
}(jQuery));

3. Call the plugin on the element that will fade in/out on page load.

<script>
$(document).ready(function() { 
$("html, body").pagefade(1000, 1000); 
});
</script>

---

This awesome jQuery plugin is developed by theawesomecoder61. For more Advanced Usages, please check the demo page or visit the official website.