Grow your CSS skills. Land your dream job.

Weird blinking in jQuery fade effect

  • # January 30, 2013 at 8:11 am

    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;
    }
    });

    # January 30, 2013 at 8:50 am

    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?

    # January 30, 2013 at 8:54 am

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

    # January 30, 2013 at 8:58 am

    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.

    # January 30, 2013 at 3:53 pm

    it worked! thanks a lot! :)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".