jQuery fadeIn on Page Load

So I have an effect on a site where some of the text fades in each time a new page is loaded. I’m doing this on a Mac and everything looks fine. I tried it on a home PC and there is a quick flash of the content before it fades in.

Here is my jQuery code:


$(document).ready(function(){
				$('h3, .body, #content ul, #content li, .bio_photo, .news_headline, .news_body, .date').css({ display: 'none'}).fadeIn(1200);
});

Does anyone know how I can fix this from quickly displaying the content before it fades it in? I tried “display:none” in the CSS but that just keeps it hidden.

I Google’d around and saw a post about adding document.write() to write inline style but I don’t understand this because I’m a n00b.

Thanks for any help!!

$(document).ready may not be fast enough.

Try placing the single line of script code at the end of the body, just before the </body> tag.

If there’s still further issues, we’ll need to look at an example of that page.

I have the same problem in explorer apparently but I work on a mac and I don’t quite trust the IE versions I’ve got. I tried what you said pmw57 but it didn’t work.

Here’s the link http://andresvaquero.com/Otros/WemakeandmendWeb/index.html

Could anyone with IE tell me if they are experimenting that flash at the beginning?

Thaanks!

I see from your linked page that you haven’t tried what I suggested.

The structure that you require is this:


<html>
<head>
  <script type="text/javascript" src="jquery.js"></script> 
</head>
<body>
  ...
  <script type="text/javascript">
    $('h3, .body, #content ul, #content li, .bio_photo, .news_headline, .news_body, .date').hide();
  </script>
</body>
</html>

Hello, just for your awareness I am not the same who posted the first message, but I have the same problem, though my javascript is a bit different. I did try before what you suggested and did not work (tested in IE 6, 7 and 8). So that you see I have just uploaded to the same link as in the previous post a new version with your suggested solution.

I am afraid it did not work, but thanks. Any other suggestions very welcome.

Regards.

Oh no… now I know what you mean. Don’t put the document ready function!!!
I’ll try that.

That is correct.

Using window.onload waits until the whole page is loaded.
Using document.ready waits until the whole DOM is ready
Having the script at the end of the body without document.ready, that doesn’t wait.

You are a star, thanks!

Awesome. I came here over an google search that i have done. I had exact the same problem, wanna hide the content div with javascript and fade it in directly afterwards. But sometimes (in IE) the content loaded, was visible an half second, was hidden and then faded in. In Firefox the content was hidden fast enough, only IE had problems with it.

Now the command is at the bottom, without the document ready command and it does work great in IE and FF.

I have registered now here to thank you. Thank you very much pmw57! :slight_smile:

edit
My command: $(‘Content’).css({‘display’ : ‘none’}).fadeIn(500);

You’re welcome Ginger.

That idea came from a resource called best practices for speeding up your web site which is well worth taking a look at.

We do have a large archive in our forum in which you may find answers, but if you’re ever at a loss about javascript related matters, please don’t hesitate to create a new thread about it.

Thanks for the help pmw. That seemed to do the trick.

Anyone know why the fade effect is not so good on a PC? It just fades kind of jerky or too fast. Oh well, can’t have everything.