显示一个元素...除非用户打开了 javascript，然后将其淡入漂亮且漂亮？
我有一个向用户显示重要文本的元素，因此我想将其动画化到窗格中（动作吸引眼球），而不是将其放在用户可能会错过的地方。
我怎样才能让它默认显示（对于关闭 javascript 冲浪的大约 1% 的用户），但为其余的用户动画显示？
使用
$(document).ready(function(){
$('#messagecenter').hide();
$('#messagecenter').show('fade', 'slow');
})
导致元素加载可见，然后消失，然后淡出。
display:hidden;
$(document).ready(function(){
$('#messagecenter').show('fade', 'slow');
})
当然会为没有 JavaScript 的用户隐藏它。
有什么好的方法可以做到这一点吗？
I have an element which shows important text to the user, as such I'd like to animate it in to the pane (motion draws the eye) rather than just have it somewhere where the user may miss it.
How can I have it showing by default (for the 1% or so of users who surf with javascript off), but animated in for the rest?
Using
$(document).ready(function(){
$('#messagecenter').hide();
$('#messagecenter').show('fade', 'slow');
})
Causes the element to load visible, then disapear, then fade.
display:hidden;
$(document).ready(function(){
$('#messagecenter').show('fade', 'slow');
})
Will of course hide it for users with no Javascript.
Is there any good way to do this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
简单的方法：让启用 JS 的用户立即隐藏内容
将其包含在页面中，而不是等待整个文档加载：
这通常足以在页面加载时停止内容渲染的闪烁。但如果内容复杂/庞大，则可能不会。这种情况下：
水密方式：在启用 JS 的情况下，为祖先元素（例如 body）添加一个类，使用 CSS 来确保仅在 JS 启用时默认隐藏正在加载的内容:
Simple way: have the content hide for JS-enabled users immediately after
including it in the page, rather than waiting for the entire document to load:
This is usually enough to stop a flash of the content rendering as the page loads. But maybe not if the content is complicated/large. In that case:
Watertight way: add a class to an ancestor element (eg body) when JS is enabled, using CSS to ensure that the content being loaded is hidden-by-default only when JS is on:
您可以选择使用
display: none;的第二个选项，并将文本再次包含在 noscript 标签。但这并不完全是最干净的事情，因为您将复制您的元素/文本。
You can go with your second option of using
display: none;, and include your text again inside a noscript tag.Not exactly the cleanest thing though, since you'll be duplicating your element/text.
最简单的答案：不要等待 document.ready 显示它。只需将该代码放在
的底部，它就应该很难被注意到。一定要链接你的查询。
Easiest answer: Don't wait for document.ready to show it. Just put that code at the bottom of your
<body>and it should hardly be noticeable.Be sure to chain your queries too.
对于这 1% 的用户，始终使用
标签。并保持普通用户的代码不变。
Always use the
<noscript>...</nosript>tag for those 1% users.And keep the code for the normal users untouched.