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
#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>');