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
Post a Comment