I'm using jQuery to fade in my site logo on my home page header, to
give the home page some animation. It works great.

So that the page will degrade gracefully if the user doesn't have
Javascript, the HTML has the complete logo already visible. That's
what users without Javascript see.   If the user has javascript, I
first hide() the logo using jQuery. Then I fade it in.

However, many times when I load my home page, I see the logo briefly
before jQuery can hide it.  You see the logo for a split second, and
then it vanishes. (After that it fades in correctly). Is there a way
to fix this?

Here's the code:

HTML:
        echo '<ul id="Animated_Header">';
                echo '<li><img src="/images/Logo_3.gif"></li>';
        echo '</ul>';

JQUERY;
$(document).ready(function()
{
        $('#Animated_Header').hide();

        $('#Animated_Header').html('<li><img src="/images/Logo_1.gif" ></
li><li><img src="/images/Logo_2.gif"  alt="FlavorZoom, the New Way to
Count Calories"></li><li><img src="/images/Logo_3.gif" ></li>');

        $("ul.nav").superfish();

        $('#Animated_Header').fadeIn(100).innerfade({
                                speed: 'slow',
                                timeout: 300,
                                type: 'sequence',
                                containerheight: '71px'
                        });

});

Thanks in advance to all for any info.


-Vik

Reply via email to