Smooth transition between html pages with a loading image animation

Question

This is excatly what I'm looking for: http://hoverstud.io . I'm NOT looking for something like this-> http://bit.ly/11jdunO , which has too many issues and bugs.

Can someone please help me find a tutorial or some links?

Answer 1

I'm not sure of what you exactly want but you could use such a code :

$(document).ready(function(){
    // to fade in on page load
    $("body").css("display", "none");
    $("body").fadeIn(400); 
    // to fade out before redirect
    $('a').click(function(e){
        redirect = $(this).attr('href');
        e.preventDefault();
        $('body').fadeOut(400, function(){
            document.location.href = redirect
        });
    });
})

It will fade the entire page. If you want to fade just a part of your page, change body by whatever you want.