当前位置：文江博客话题详情

jQuery - 隐藏元素的最佳方法？（以防止元素在实际隐藏之前闪烁）

发布于 2024-11-30 14:03:57 字数 949 浏览 0 评论 0原文

我记得在某个时刻 Opera （很可能是 Safari。） 遇到了一个问题，如果您在元素上使用 .hide()，它会短暂闪烁，然后才会出现实际上隐藏了该元素。

现在，如果你不想忽略那些由于某种原因在浏览器中没有打开 js 的人，你就不能真正使用 CSS 在该元素中设置 display: none; 来隐藏它，然后使用 js 来例如淡入。

我最近注意到这种情况在 Opera 中不再发生。所以，我想知道在某些浏览器中是否仍然会发生这种情况，以防我错过了......并假设这种情况会发生。什么方法是最安全的方法？（当然在这种情况下忽略 css 方法。）

js .hide()

js .addClass('hide') css .hide { display: none;或者

其他什么？

编辑：

js element.style.display = "none"

js $(element).css({display:"none"})

Edit2：这个问题可能已经在实际上是野生动物园。我还认为较新的 jquery 版本可能已经解决了这个问题。我认为 jquery 网站上有一些关于此问题的错误报告，但我找不到这些错误报告。或者它仍然可能是较新的浏览器版本修复了它.. 没有把握。

Edit3：

所以，当我开始在 Safari 而不是 Opera 中搜索这个错误时，我确实发现了更多关于此问题的信息。虽然我不能肯定地说它在歌剧中也从未发生过......

看起来这个问题不再存在并且使用 .hide() 是安全的，但我学到的是当问题仍然存在时，这个 $(element).css({display:"none"}) 确实解决了问题。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

昨迟人 2024-12-07 14:03:57

您应该始终依赖使用 jQuery hide() 方法来隐藏任何元素，因为它会处理所有浏览器。不过我在 Opera 中没有发现任何问题。

出于同样的原因，即使要显示任何元素，您也应该始终依赖使用 show() 方法。

例如，要显示 tr 元素，如果我们说 tr.css("display", "block") 它在 Firefox 中将不起作用，因为它是一个表格行并且需要指定为 .css("display", "table-row")。但如果您使用tr.show()，您就不必担心任何浏览器。

回复收藏 0 原文

樱花落人离去 2024-12-07 14:03:57

您可以使用 noscript 提供始终显示的替代元素，而 JS 元素一开始是隐藏的。

或者，您可以从没有 CSS 规则的类开始，然后获取脚本来更改 CSS 类规则，以确保元素一开始是隐藏的。

<html>
    <head>
        <style type="text/css">
            p.start-hidden-if-js-enabled {              
            }
        </style>
        <script type="text/javascript">
            document.styleSheets[0].cssRules[0].style.display = "none";
        </script>
    </head>
    <body>
        <p class="start-hidden-if-js-enabled">
            This text will be hidden if javascript is enabled.
        </p>
    </body>
</html>

You could use noscript to provide an alternative element that is always displayed, whilst the JS element starts off hidden.

Or you could use start out with a class with no CSS rules and then get a script to alter the CSS class rule to make sure the element starts off hidden.

<html>
    <head>
        <style type="text/css">
            p.start-hidden-if-js-enabled {              
            }
        </style>
        <script type="text/javascript">
            document.styleSheets[0].cssRules[0].style.display = "none";
        </script>
    </head>
    <body>
        <p class="start-hidden-if-js-enabled">
            This text will be hidden if javascript is enabled.
        </p>
    </body>
</html>

回复收藏 0 原文