Question

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:[e-mail]">Email: [e-mail]</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!

Answer 1

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.