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

时间：2011-08-21 21:41:23

标签： javascript jquery hide element

我记得在某些时候Opera ( Mostlikely it was Safari instead. )遇到了一个问题，即如果你在元素上使用.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：这个问题可能实际上是在Safari中。我也认为较新的jquery版本可能已经解决了这个问题。因为我认为在jquery网站上有一些关于这个问题的bug报告，但我找不到那些bug报告..或者它仍然可能是那个更新的浏览器版本修复它..不确定。

EDIT3：

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

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

3 个答案:

答案 0 :(得分：5)

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

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

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

答案 1 :(得分：1)

只需在样式表中添加display：none或在元素上添加内联样式=“display：none”。

答案 2 :(得分：0)

您可以使用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>
相关问题
最新问题