jQuery: Why does the transition blink

JavaScript
1

Whispering Turbines, Inc.

This is the website that is in question. Below is the script that I think is causing the problem. Every time you navigate to a new page I want the pages to fade out/in. However, there is a brief blink in between animations. I have tried to use stop() and not, but neither seems to help. I will post both options.

Option 1:


$(document).ready(function() {
	$('body').css('background-color', '#000');
	$('body').css('display', 'none');
    $('body').fadeIn(1000);
	$('a').click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        window.location = linkLocation;
        });
});

Option 2:


$(document).ready(function() {
	$('body').stop().css('background-color', '#000');
	$('body').css('display', 'none');
    $('body').fadeIn(1000);
	$('a').click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        window.location = linkLocation;
        });
});
2

There is no way to stop this from happening while using window.location, your best option would be to use jQuery’s AJAX methods to pull in the content and overwrite the current body content.

3

Thanks Sarge.