Question

在我开发的一些网站中，一旦页面加载，就会有内容的滑入/淡入动画。我使用jQuery，但在动画之前，必须隐藏内容。首先，我使用了css规则#content{display:none}。然后在javascript块<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(); ...

的页眉中

如果我理解的话，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插件之前尝试隐藏内容，但它没有按照我期望的方式工作..任何帮助将不胜感激

Answer 1

尝试在头脑中做点什么：

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

我很久没有这样做了，但我过去经常使用它。

Answer 2

<code>
$( function(){$('#content').css("display","none"); });
</code>

当你的页面完全充电时：

<code>
$(window).load(function() {
$( function(){$('#content').css("display","block");
});
</code>

Answer 3

这只是我的意见......

但我真的没有准备禁用javascript的人。正如有人已经说过的那样，谁仍然这样做？如果他们在那里做过网络体验会很糟糕。为什么不添加绕过整个函数的noscript标记，只显示内容。因此，如果有人在没有JS的情况下访问该网站，他们只是正常看到该页面。

我觉得人们发布的所有建议都非常严重，而且根本不是很好的做法。

如何使用jQuery动画幻灯片，而不在显示内容之前显示内容？

3 个答案: