2

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

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

使用

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

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

display:hidden;


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

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

有什么好的方法可以做到这一点吗？

4

4 回答 4

3

简单的方法：在页面中包含内容后立即为启用 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>
于 2011-04-12T20:42:35.930 回答
2

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

不过，这并不是最干净的事情，因为您将复制您的元素/文本。

于 2011-04-12T20:15:23.977 回答
1

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

一定要链接你的查询。

$('#messagecenter').hide().fadeIn('slow');
于 2011-04-12T20:16:53.047 回答
1

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

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

于 2011-04-12T20:19:11.753 回答