Webkit flashing text that's supposed to be hidden page load

I have a few elements that I move out of the main container on document.ready and animate in using animate() on window.load

In webkit browsers, text from one of the elements briefly flashes on the screen. It works fine on non-webkit browsers.

Here's the code:

      <header>
        <div id="logo">
            <h1 class="ir">Blank Consultants Inc.</h1>
            <a href="index.html"><img src="images/logo.gif" alt="Pro-edge logo" width="258" height="158" /></a>
            <h2 id="tagline">Powerful. Effective. Creative.</h2>
        </div>

        <div id="contact">
            <a id="email" href="mailto:info@blank.com">Email: info@bl开发者_如何学Goank.com</a>
            <p id="number">Toll-Free: 5555555</p>
        </div>

        <nav id="nav">
            <a href="/">home</a>
            <a href="/">what we do</a>
            <a href="/">blogs</a>
            <a href="/">cosmo</a>
            <a href="/">team</a>
            <a href="/">contact us</a>
        </nav>

        <div id="header-image" class="clear">
            <img src="images/mainPage.jpg" width="960" height="283" />
        </div>
    </header>

JavaScript:

$(document).ready(function () {
    $('#logo').css('left', '-455px');
    $('#contact').css('right', '-455px');
    $('nav').css('top', '-180px');

    $(window).bind("load", function () {
        $('nav').animate({ 'top': 0 }, 1200, 'swing');
        $('#logo').animate({ 'left': 0 }, 1250, 'easeOutExpo');
        var x = function () {
            $('#contact').animate({ 'right': 0 }, 1250, 'easeOutExpo');
        };
        setTimeout(x, 170);
    });
});

I'm thinking of just using CSS3 to do this in webkit, but I'd really like to know what's causing this problem.

Thanks!

Your elements will only be hidden after the page finishes loading.
Until then, they will be visible.

You should put the Javascript immediately after the elements, and not wait for page load.

You could also hide the elements using CSS, but that will break your site for visitors without Javascript.

I suspect that there is a short delay between when the elements are displayed, and when the script runs. You might try hiding the elements in the HTML, and then showing them in the javascript when the document loads. This would prevent the flickering effect you are referring to.