在我开发的一些网站中，一旦页面加载完毕，就会有内容的滑入/淡入动画。我为此使用 jQuery，但在动画之前，有必要隐藏内容。为了实现这一点，我首先使用了 css 规则 #content{display:none} .然后在 javascript block 的页眉中 <script type="text/javascript">
$(function() {
$('#content').css("display","block");<br/>
$('#content').stop().css("margin-top","100%").animate({marginTop:'100%'} ,1300).animate({ marginTop:'5'}, 700,"swing", function(){
$('#loading').fadeOut();
...
如果我理解得很好，jQuery 代码会在页面加载后执行，并且这种方式运行良好，但存在一个问题。如果用户没有 javascript 支持，那么页面将保持空白，因为隐藏了 css 内容。谷歌网站管理员工具也显示空白页面预览可能是因为它们不执行 javascript(jQuery) 代码，而且 Safari 网络浏览器的热门网站页面由于相同的 css 规则而显示空白页面预览。因此，为了完全支持非 javascript 浏览器，我删除了 css 规则，而不是使用 javascript 代码来隐藏内容 <script type="text/javascript">document.getElementById("content").style.display="none"; document.getElementById("loading").style.display="block";</script>仅适用于具有 javascript 支持的用户，但如果互联网连接太慢，首先内容会像普通页面一样加载，一旦加载，浏览器就会隐藏它并执行动画。这很烦人，因为这样动画会影响用户体验而不是改善它。你开始阅读页面，突然页面消失并滑入......你可以在这里看到结果 - http://sky-camp.com/en/paragliding-courses.html
我错过了什么？我使用 javascript 而不是 jQuery 进行内容隐藏，以便在加载 jQuery 插件之前尝试隐藏内容，但它没有按我预期的方式工作。任何帮助将不胜感激
最佳答案
尝试在脑海中做一些事情，例如:
<script>document.write('<style>#content{display:none;}</style>');</script>
我已经很久没有这样做了，但我以前经常使用它。
关于javascript - 如何在加载之前不显示内容的情况下使用 jQuery 动画化幻灯片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18114362/