- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Weird blinking in jQuery fade effect
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:
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;
}
});
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?
I’m using Chrome.. it’s just a short flash of white when you browse around
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.
it worked! thanks a lot! :)