CODEWITHSUNDEEP
jquerycss
Steffan Harris
Steffan Harris

Reputation: 9326

Fade in and show page slowing with JQuery when visibility is initially hidden

Ok, suppose I had a body element in my stylesheet and I set visibility:hidden; When the page is loaded I would like to use .fadeIn and fade in the page slowly.

I tried something like this, but it didn't work.

$("body").css("visibility", 'visible').fadeIn("slow");

Upvotes: 2

Views: 1664

Answers (5)

Trav McKinney
Trav McKinney

Reputation: 998

$("body").hide().fadeIn("slow");

This is the easiest way to do it.

http://jsfiddle.net/AvG5G/1/

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

Instead of visibility, set the opacify to 0 and then use animate to get the best effect.

$("body").css("opacity", 0).animate({ opacity: 1}, 1000);

Demo

You can set the initial opacity to 0 through css itself which will give even better effect. With that the code is reduced to just.

$("body").animate({ opacity: 1}, 1000);

Upvotes: 7

Matt
Matt

Reputation: 23749

In your CSS, set display: none for body.

Your JS would be $("body").fadeIn("slow");

That works!

Upvotes: 1

Rafay
Rafay

Reputation: 31033

initially hide the body with css, display:none;

$("body").hide(0).delay(2000).fadeIn("slow");

DEMO

.delay is only added for demonstration purpose

Upvotes: 0

James Montagne
James Montagne

Reputation: 78650

Change it to:

$("body").css("display", 'none').fadeIn("slow");

fadeIn works on elements with display: none. Also, setting visibility to visible will have it shown, not hidden.

http://jsfiddle.net/AvG5G/

Upvotes: 2

Related Questions