Hi,

 

I'm trying to create an jquery effect that fadein all the <div> in the page when I open the page...

 

I tried:

 

 

 

window.onload = function(){
    $("#menu, #container div").hide().fadeIn(4000)
};
 

but the <div> appear and then they disappear and do the fadein effect..

 

please help!

here you go mate

 

jsfiddle net / tRaDp / 2 /

Hi.

With the .hide() method you are actually fading the elements out from their initial display when the page loads.

In other words: You are fading elements out and then in.
Have you tried .css("display","none") instead?

 

window.onload = function(){
    $("#menu, #container div").css("display","none").fadeIn(4000);
};

 

EDIT: Or maybe it's ("visibility","hidden") I don't remenber

Edited April 9, 201313 yr by Nillervision

Now I remember:

”hide” affects both the display and visibility properties. When you are fading in you are only affecting the display property.
So If you are using “hide” simply use “show” instead of “fade in” to restore the visibility. Otherwise your divs will be "displayed" but take up 0px width and height.

EDIT: If you don't wan't the divs to fade out first (I asume so) The just use my code from the post above

Edited April 9, 201313 yr by Nillervision

Ok, I've got it! Thanks!

 

But there is an other little problem...

 

the page has a div called "wrapper" that contains the other divs..

This "wrapper" has a background-image, I would load the image and then the inside divs starts to fadein, is it possible?

Here you go Marv, I've set up a little example for you. Hope it's what you're after

 

http://jsfiddle.net/LyndseyB/ysa4f/

 

Lyndsey.

Wow Lyndsey! Wonderful!

 

I modified a little thing, because I have some divs that it is useless to fadein (such as the right side, left side ecc..) and they slow down the effect!

 

I set a class for the divs I want to fade, then I select the class in the script:

$(function() {
    $('.hidden').each(function(i) {        
       $(this).delay(800*i).fadeIn(1500); 
    });
    
    
}); 

 

 

And it seems to work!

Wow Lyndsey! Wonderful!

 

I modified a little thing, because I have some divs that it is useless to fadein (such as the right side, left side ecc..) and they slow down the effect!

 

I set a class for the divs I want to fade, then I select the class in the script:

$(function() {
    $('.hidden').each(function(i) {        
       $(this).delay(800*i).fadeIn(1500); 
    });
    
    
}); 

 

 

And it seems to work!

 

Brilliant.

I tried with another pc, but the animation doesn't wait the image...

The effect start before the image are totally loaded

 

i upped the page here:

 

http://lic.altervista.org/provainda/provainda4/

Works fine for me on Chrome. What browser are you using?

 

Edit: Also tried on IE9. Works OK. Trying to think of something we can add to avoid slow loading times.

 

I'm not sure what to do here. I think you'll probably need some sort of preloading function that waits for the image to load before completing the animation. Maybe Andy or someone with better knowledge will be able to help. Have a look at this question on Stackoverflow: http://stackoverflow.com/questions/476679/preloading-images-with-jquery

you mean something like this myman?

 

http://happytailspetcamp.com/

 

this is my own work, when the home page loads, it fades the whole page in to give an easing effect. It wil load slow, on a crappy server and in america!

 

Heres the code:

<script type="text/javascript">
jQuery(document).ready(function() {
	
	jQuery(".page").css("display", "none");

    jQuery(".page").fadeIn(1000);
    
	jQuery("a.transition").click(function(event){
		event.preventDefault();
		linkLocation = this.href;
		jQuery(".page").fadeOut(1000, redirectPage);		
	});
		
	function redirectPage() {
		window.location = linkLocation;
	}
	
});
</script>

you mean something like this myman?

 

http://happytailspetcamp.com/

 

 

Works fine for me on Chrome. What browser are you using?

 

Edit: Also tried on IE9. Works OK. Trying to think of something we can add to avoid slow loading times.

 

I'm not sure what to do here. I think you'll probably need some sort of preloading function that waits for the image to load before completing the animation. Maybe Andy or someone with better knowledge will be able to help. Have a look at this question on Stackoverflow: http://stackoverflow.com/questions/476679/preloading-images-with-jquery

 

 

 

Yes, i kind of that..

 

When I open the page I see only the background image, then the other divs fadein (after 1-2 sec)...

 

If the internet connection is slow, I have to wait that the background image is loaded then the divs can fade!

 

a preload script can solve it?

I don't know if it will make a difference but hav you tried using $(document).ready instead of window.onload

like this:

$(document).ready(function () {
/*Your code here*/
});

Putting the code in the window.onload it works!