[CodeSnippet] jQuery : Fade In Webpage

Posted on April 4, 2010 and got 3 shouts so far

The following short code is a way to add a fade in effect to your webpage. The main task we want to do are hiding our webpage content then display it with fade in effect when the user load the webpage. These step will use two jQuery built-in function, hide() and fadeIn().

Show Implementation

Download Source

$(document).ready(function() {
	$('body').hide().fadeIn(1000);
});

First we hide the whole body using hide() and display it using fadeIn() in 1000 milliseconds. The last, never hide your whole body using CSS and display them using JavaScript to avoid your content stay hidden because of the user disabling the JavaScript.

This Post Tags :

Bookmark Post :

Amie April 5, 2010 at 1:10 pm

it’s so simple but nice
thx for share

Reply
Brett Widmann November 26, 2010 at 2:21 am

This is such an easy implement for such a great effect. Thanks for sharing.

Reply
Javier Orta November 10, 2011 at 4:14 pm

Great effect! (And very useful for a noob like me) Thanks a lot!

Reply