Weird blinking in jQuery fade effect

[esbenvh]

Hello

I have made a simple website for my band, and wanted to use some fade in/fade out effect between pages. I found a tutorial online, but when i change between the pages insted of having a nice fade effect, the page fades and then blinks white for a sec. how do i combat this? i found out that it maybe was the background image that was causing this, but its a big part of the design, so i dont want just a soild black background.

You can see the error here:

http://skinhimalive.com/

this is the jQuery code:

$(document).ready(function() {
$(‘body’).css(‘display’, ‘none’);
$(‘body’).fadeIn(1000);

$(‘.transition’).click(function() {
event.preventDefault();
newLocation = this.href;
$(‘body’).fadeOut(1000, newpage);
});
function newpage() {
window.location = newLocation;
}
});

[TylerNYC]

Hello!

I’ve checked in Firefox and Chrome, it seems to be okay to me, I don’t see any effect.

What browser are you using?

[esbenvh]

I’m using Chrome.. it’s just a short flash of white when you browse around

[Mottie]

Hi esbenvh!

Well the first thing I noticed was that the css for the html definition is missing a “k”

html {
font-size: 100%;
bacground-color:#000;
}

I don’t think that will fix the issue since the browser’s default unstyled background color is usually white. So I think a better idea might be to add a content wrapper immediately inside the body and fade that out instead of the body.

You might want to also speed up the transition, one second is a bit long considering one second to fade out and another to fade back in.

[esbenvh]

it worked! thanks a lot! :)

[Author]

Posts