javascript - how to animate slide in with jQuery without showing content before it's loaded? -


in few websites developed me there slide-in/fade-in animations of content once page loaded. use jquery before animation necessary content hidden. achieve first have used css rule #content{display:none} . in page header in javascript block <script type="text/javascript"> $(function() { $('#content').css("display","block");
$('#content').stop().css("margin-top","100%").animate({margintop:'100%'} ,1300).animate({ margintop:'5'}, 700,"swing", function(){ $('#loading').fadeout(); ...

if understand well, jquery code executes once page loaded , works way, there 1 problem. if user has no javascript support page remains blank because of hidden css content. google webmaster tools shows blank page preview because not execute javascript(jquery) code , safari web browser's top sites page blank page preview because of same css rule. in order have full support non javascript browsers removed css rule , instead of use javascript code hide content <script type="text/javascript">document.getelementbyid("content").style.display="none"; document.getelementbyid("loading").style.display="block";</script> users has javascript support way if internet connection slow first content loading in normal page, , once loaded browsers hides , animation executed. annoying because way animation bothering user experience instead of improving it. start reading page , page disappears , slide in... can see result here - http://sky-camp.com/en/paragliding-courses.html

what miss? use javascript content hiding instead of jquery in order try hide content before jquery plugin loaded, not work way expect.. appreciated

try doing in head like:

<script>document.write('<style>#content{display:none;}</style>');</script> 

i haven't don't in long time, used use often.


Comments

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

java - Why does my date parsing return a weird date? -

Need help in packaging app using TideSDK on Windows -