Making a Webpage fade-in with jQuery (Cross-Browser Compatible)

Share
Tweet about this on TwitterShare on Facebook0Share on Google+0Share on Reddit0Share on StumbleUpon0Share on LinkedIn1Email this to someoneShare on Tumblr0Digg this

jQuery logoGoal

Using lessons from my jQuery class, I added a jQuery fade-in effect to my company’s homepage: It greets visitors with a white page quickly resolving into a site menu. This fade-in effect works on every browser version I tested, including the earlier, opacity-challenged versions of Internet Explorer (IE). It also gracefully degrades if the visitor has disabled JavaScript.

Challenge

Initial searches on Google and Stack Overflow presented a host of possible solutions, but not all combinations of them worked. Some suggested using jQuery’s .animate() method to change opacity from 0 to 1, others suggested using .fadeIn(), while others suggesting using a white <div> as an initial overlay. Questions that came up in my mind included: Should I use a CSS style sheet to hide the page body initially, and then unhide it with jQuery? Should I instead let jQuery do the hiding? When I do the hiding, should I use the CSS properties of ‘display’, ‘visibility’ or ‘opacity’? Also, how do I handle opacity issues in Internet Explorer versions before IE9?

Solution

The code below produces a fade-in effect in every browser I tested, including everyone’s favorite problem child, IE6:

$(document).ready(function (){
$('body').css('opacity', '0').fadeTo(1500, 1,'swing'); 
});

jQuery Version Used: 1.8.3

Tested on Browsers:

Firefox Chrome IE Safari Opera
17.01

23.0.1

10.0.9 5.1.7 (Win) 12.12
5 9 5 (Mac)
4 8 4 (Mac)
3.6.16 7
6

The ‘swing’ easing gives the transition a natural feel without increasing the Webpage’s footprint with the jQuery Easing Plugin. A period of 1.5 seconds seems ideal for my eyes. Less time makes the fade-in jerky in some browsers, and more time makes it seem laggy. Although most sources suggest placing the jQuery code at the end of the page, before </body>, I chose to place the jQuery code (the jQuery library as well as the jQuery code I wrote)) within the <head>. The former choice is problematic since causes the page contents to display for a split second before being hidden and then being faded-in. The only issue I could not eliminate is that in all version of IE, some of the time when the page loads, not every element in the menu resolves in unison. All elements ultimately resolve, though.

Alternatives  (Less Recommended)

In terms of fading-in the entire page, either of these works as well as the above solution.

$('body').css('display', 'none').fadeTo(1500, 1, 'swing');

-or-

$('body').css('display', 'none').fadeIn(1500,'swing');

 

However, the below table and footnotes explain why I avoid them.

  .fadeTo() .show() .fadeIn()
$(‘body’).css(‘opacity’, ‘0’)

Worksα

 

 

$(‘body’).css(‘display’, ‘none’)

Chancyβ

Chancyβ

Buggyγ

$(‘body’).css(‘visibility’, ‘hidden’)

 

 

 

α Is the best option.

β Causes a fade-in, but might have confounding effects in some situations. Changing the value of the CSS property ‘display’ has the potential to cause page elements to shift, especially when applied to individual elements such as divs and images. After viewing a draft of this post, a friend wrote to me, “When elements have ‘display: none’ applied, they are removed from the document’s flow for positioning purposes.  Hence, this is far more extreme than toggling visibility or alpha.  This is why you see elements shifting when ‘display: none’ is overridden and the new element suddenly has to be factored into the overall positioning scheme of the page.  You are right to conclude that this option is less than ideal.”

γ Although it causes a fade-in, it also causes the central menu images to make their initial appearance on the left of the page, and then shift to center. This leftward movement is jerky in my versions of Firefox and Safari(Windows OS), and doesn’t serve any purpose. jQuery has better means of moving elements.

Caveats

Finally, to avoid any bugs that might cause elements to appear without a fade-in (or worse, cause the page to be blank), do the following:

 

Happy Coding, and feel free to share this post!

Share
Tweet about this on TwitterShare on Facebook0Share on Google+0Share on Reddit0Share on StumbleUpon0Share on LinkedIn1Email this to someoneShare on Tumblr0Digg this
This entry was posted in jQuery, Sean's Posts, Web Design and tagged , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.
  • Ayman

    Hi.. Many thanks… The code words perfectly fine with all elements on the page except for the background image. Is there a way to fix that? Cheers

  • Currently Reading:

  •   
  •