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