显示一个元素…除非用户打开了javascript，否则将其淡出

Show an element... unless the user has javascript turned on, then fade it in nice and pretty?

本文关键字：javascript 淡出 用户 一个 元素 显示      更新时间：2023-09-26

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

我怎么能让它默认显示(1%左右的用户谁冲浪与javascript关闭)，但动画在其余的?

使用

    $(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标记中。

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

最简单的回答:不要等待文档。准备好展示了。只要把这段代码放在你的<body>的底部，它应该很难被注意到。

一定要链接你的查询。

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

总是为那1%的用户使用<noscript>...</nosript>标签。

保持普通用户的代码不变

相关文章：