JQuery HTML Fader [beta 0.1]
Dont you hate it how Flash Website always have the best effects yet HTML seems to be so bland even with jQuery. Well, now you can have stylish looking fade in/outs when people navigate your website with jQuery HTML Fader. jQuery HTML Fader is a simple plugin used to get your website to fade in on load and fade out when a link is clicked.
JQuery fader does not “fade out” when just any link is clicked (as you may be using shadowbox or another type of Javascript). All links with the class of “fader” will start the fading effect.
To implement jQuery HTML Fader, copy and paste the Fader script into you head (as well as an up to date version of jQuery) and then give all you links you want to use the script to have a class of “fader” and your done.
Usage example:
<a href="http://example.com" class=”fader">Click here</a>
The script:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").fadeOut(0, function(){ // Instantly changes the html body to 0% opacity on load
$("body").fadeIn(1000); // Fade the body to 100% opacity (change for slow/longer fade in)
});
$("a.fader").click(function(){ // Checks if the link has a class of “fader”
var url = $(this).attr('href'); // Saves the link of the clicked link.
$("html").fadeOut(1000, function(){ window.location.href=url });
// Fade the body to 0% opacity (change this for slow/longer fade in),
// then on complete it go to the original address of the link.
return false; //cancels the link original functionality
})
});
</script>