显示一个元素…除非用户已打开JavaScript，然后将其淡化为漂亮？

问题描述

| 我有一个向用户显示重要文本的元素，因此，我希望将其设置为窗格中的动画（动感动人），而不是仅将其放在用户可能会错过的地方。默认情况下，我该如何显示它（对于使用javascript禁用浏览的用户中大约1％左右），而其余部分则显示为动画？使用

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

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

display:hidden;


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

对于没有Javascript的用户，当然会隐藏它。有什么好办法吗？

解决方法

简单方法：在启用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>

,您可以选择使用display: none;的第二个选项，然后将文本再次包含在noscript标记内。不过，这并不是最干净的事情，因为您将复制元素/文本。 ,最简单的答案：不要等待document.ready显示它。只需将代码放在ѭ5的底部，就几乎不会引起注意了。确保也链接您的查询。

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

,对于那些1％的用户，请始终使用“ 7”标签。并保持普通用户的代码不变。

javascript 一个元素元素化为将其打开打开显示显示漂亮用户用户用户