Not exactly the most widely used - example, but this works really well!
I've seen a lot of fade between pages things, but none of them work as simply as I had hoped. This is super simple. Special thanks to the members of WT who helped me with this script!
Code:
<body onload="fadeIn()">
<script type="text/javascript">
$(document).ready(function(){
var fadeTime = 300;
$(window).load(function() {
$('body').hide();
$('body').fadeIn(fadeTime);
});
});
$(document).ready(function() {
var loader;
$('a').bind("click", function(){
var pageURL = $(this).attr('href');
$('body').stop(true, true);
$('body').fadeOut(fadeTime);
window.clearTimeout(loader);
loader = window.setTimeout(function() {
window.location=pageURL;
$('body').fadeIn(fadeTime);
loading = false;
}, fadeTime);
return false;
});
});
</script>
That will fade the body element in and out! And it works on any page, just pop this code in any page you want to fade in/out and BAM. There you go.
The thing I wanted to make this for was because most of the other page fade scripts used AJAX to fetch the next page's URL and load it into a div. That sucks, because the URL stays the same, making it bad for SEO. This way you can have all your normal pages, but also have that nice added fade effect.
Now tell me how stupid I am and that everybody already knows it. **usually what happens when I post scripts I made ;P** |
