显示一个元素...除非用户打开了javascript，然后将其淡入漂亮和漂亮？答案

【问题标题】：Show an element... unless the user has javascript turned on, then fade it in nice and pretty?显示一个元素...除非用户打开了javascript，然后将其淡入漂亮和漂亮？
【发布时间】：2011-08-04 04:56:08
【问题描述】：

我有一个向用户显示重要文本的元素，因此我想将其动画化到窗格中（动作吸引眼球），而不是将其放在用户可能会错过的地方。

我怎样才能让它在默认情况下显示（对于 1% 左右关闭 javascript 的用户），但在其余的情况下以动画形式显示？

使用

    $(document).ready(function(){
        $('#messagecenter').hide();
        $('#messagecenter').show('fade', 'slow');
    })

使元素加载可见，然后消失，然后淡出。

display:hidden;


    $(document).ready(function(){
        $('#messagecenter').show('fade', 'slow');
    })

当然会为没有 Javascript 的用户隐藏它。

有什么好的办法吗？

【问题讨论】：

标签： javascript jquery graceful-degradation

【解决方案1】：

您可以选择使用display: none; 的第二个选项，并将您的文本再次包含在noscript 标记中。

虽然不是最干净的东西，因为您将复制您的元素/文本。

【讨论】：

正文中的 noscript 标记通过 HTML5 文档类型的 W3C 验证器。我还没有找到可靠的消息来源说它已被弃用。
我内心的纯粹主义者欣赏他的努力。为了运行和使用您的网站，不应该要求拥有 JavaScript。 JavaScript 是你的内容坚果和 CSS 巧克力上的糖果涂层。当它在那里的时候很好，但是把它拿走，你的 M&M 应该还是很好吃的。我饿了……我又在说什么了？
我在您发布此答案后进行了检查，实际上并非如此。我将不得不权衡这个后端解决方案与这里介绍的前端解决方案，因为它们对我的特定情况都有优点和缺点......

【解决方案2】：

最简单的答案：不要等待 document.ready 显示它。只需将该代码放在 <body> 的底部，它应该几乎不会被注意到。

一定要链接你的查询。

$('#messagecenter').hide().fadeIn('slow');

【讨论】：

我必须通过网络对此进行测试，但在我的本地网络服务器上，它的性能大致相同。
视情况而定。我发现在我自己的情况下就足够了。如果它不起作用，请考虑将其放在您的 div 之后。 <div></div><script>...</script>

【解决方案3】：

始终为这 1% 的用户使用 <noscript>...</nosript> 标签。

并保持普通用户的代码不变。

【讨论】：

【解决方案4】：

简单方法：在启用 JS 的用户之后立即隐藏内容将其包含在页面中，而不是等待整个文档加载：

<div id="messagecenter">Albatross!</div>
<script type="text/javascript">
    $('#messagecenter').hide();
    $(document).ready(function() {
        $('#messagecenter').show('fade', 'slow');
    });
</script>

这通常足以在页面加载时停止内容呈现的闪烁。但如果内容复杂/大，可能不会。在这种情况下：

水密方式：启用JS时为祖先元素（例如body）添加一个类，使用CSS确保加载的内容仅在JS打开时默认隐藏：

<head>
    <style type="text/css">
        body.withjs #messagecenter { visibility: hidden; }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#messagecenter').show('fade', 'slow');
        });
    </script>
</head>
<body>
    <script type="text/javascript">
        $(document.body).addClass('withjs');
    </script>
    ...
    <div id="messagecenter">Albatross!</div>

【讨论】：

（我支持 monty python 参考，就像我支持好的解决方案一样）