JQuery FadeIn effect and Omega Theme I am trying to use the fade in effect in Drupal when I load a page.

In my Omega sub-theme I have included the following line in its .info file.

scripts[] = '/js/custom.js'


In the script, I have included the following code.

$(document).ready(function() {

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

});


If I load the page, I see no effect at all, but I clearly see that my JavaScript is in the header. 

&lt;script type="text/javascript" src="http://localhost/innodru/sites/all/themes/CHILDTHEME/js/custom.js?m2zpiw"&gt;&lt;/script&gt;


I have cleaned the cache and tried a lot of things, but it does not look like is working.
I am using Drupal 7.
You should not be using document.ready. Instead you should use drupal behaviors. Even though document.ready will work. Behaviors is the drupal 7 way to do things as these behaviors get called after ajax calls too.

css

body {display:none;}


javascript

(function ($) {
    Drupal.behaviors.fadein = {
            attach:function(context, settings){
                    $('body', $context).once().fadeIn(2000);
            }
    };
})(jQuery);


And FYI
Omega adds a 'responsivelayout' event that will get fired every time the layout is set/changed including when the page loads so you could potentially make the page display straight away on mobiles and fade in on others.  

(function ($) {
    Drupal.behaviors.fadein = {
            attach:function(context, settings){
                $('body', context).bind('responsivelayout', function(e) {
                    if($('body', context).hasClass('responsive-layout-mobile')){
                            $('body').once().show();
                    }else{
                            $('body').once().fadeIn(2000);
                    }
                });
            }
    };
})(jQuery);


I have not tested the code BTW, but you get the idea