javascript - How to Fade In Background on Page Load - jQuery -


when click on link gif image load on corner of page. need fade in entire background on page loading, have added $('#content').fadein(1000); show background in fade effect how can fade background page while gif loading on background ?

html

<div id="cssmenu">         <li><a href="index.html">html</a></li>         <li><a href="about.html">about</a></li>         <li><a href="portfolio.html">portfolio</a></li> </div> <div id="wrapper"> <div id="content">               <h2>welcome!</h2>         <p> ajax functionality content loads relevant container instead of user having navigate page awesome effects...</p> </div></div> 

css

#wrapper { border:1px solid green  } #cssmenu {   background: #333;   list-style: none; width:120px; } #cssmenu li {    margin: 0;   padding: 0;   list-style: none;   width:120px; } #cssmenu {   background: #333;   border-bottom: 1px solid #393939;   color: #ccc;   display: block;   padding: 8px 2px;   text-decoration: none;   font-weight: normal; } #cssmenu a:hover {   background: #2580a2;   color: #fff;  }  #load {     display: none;     position: absolute;     right: 10px;     top: 10px;     background: url(http://i.imgur.com/fhiyjsj.gif);     width: 43px;     height: 11px;     text-indent: -9999em; } #content { } 

jquery

$(document).ready(function() {      var hash = window.location.hash.substr(1);     var href = $('#cssmenu li a').each(function(){         var href = $(this).attr('href');         if(hash==href.substr(0,href.length-5)){             var toload = hash+'.html #content';             $('#content').load(toload)         }                                                });      $('#cssmenu li a').click(function(){          var toload = $(this).attr('href')+' #content';         $('#content').hide('fast',loadcontent);         $('#load').remove();         $('#wrapper').append('<span id="load">loading...</span>');  $('#content').fadein(1000);         $('#load').fadein('normal');         window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);         function loadcontent() {             $('#content').load(toload,'',shownewcontent())         }         function shownewcontent() {             $('#content').show('normal',hideloader());         }         function hideloader() {             $('#load').fadeout('normal');         }         return false;      });  }); 

fiddle

http://jsfiddle.net/bpvp4vse/1/

    #wrapper {          border:1px solid green;             position:relative;// add    } #load {     display: none;     position: absolute;     right: 50%; //this     top: 50%;//this     background: url(http://i.imgur.com/fhiyjsj.gif);     width: 43px;//hack center horizontally     height: 11px;//hack center vertically     margin-left:-21px;     margin-top:-5px;     text-indent: -9999em; } 

change #wrapper #content

$('#content').append('<span id="load">loading...</span>'); 

http://jsfiddle.net/bpvp4vse/8/


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -