Applying majority of page CSS to a jQuery FadeOut? -

i have jquery fadeout code:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <script type="text/javascript"> $(window).load(function () {     $(".loader").fadeout("fast"); }) </script> 

and css .loader is

.loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-color: #000000;   } 

so when page loads, user seeing black screen (background-color element) , other page elements fadein black screen.

all pages using masterpage/css layout - i'd instead of applying background color .loader, apply of elements when postback occurs, borders, margins, images , menus etc frozen, new elements new controls , text change between pages fadein.

what's best way of doing this?

so want parts off page fade in, not whole page. can if change in css file width,height,left,top tributes. next can create new entry in css file loader2. here experiment, can add more loader class if needed.

css file:

.loader { position: fixed; left: 0px; top: 0px; width: 300px; height: 100px; z-index: 9999; background-color: #000000;   }  .loader2 { position: fixed; left: 350px; top: 150px; width: 200px; height: 200px; z-index: 9999; background-color: #000000;   } 

and change jquery to:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <script type="text/javascript"> $(window).load(function () {     $(".loader").fadeout("fast");     $(".loader2").fadeout("fast"); })