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

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

javascript jquery

Javascript jQuery-隐藏元素的最佳方法？（在实际隐藏之前防止元素闪烁）,javascript,jquery,hide,element,Javascript,Jquery,Hide,Element,我记得在某个时候Opera（很可能是Safari。）有一个问题，如果在元素上使用.hide（），它会在实际隐藏元素之前短暂闪烁现在，如果你不想忽视那些由于某种原因在浏览器中没有js的人，你就不能真正使用CSS来设置display:none来隐藏它，然后使用js来淡入我最近注意到这在歌剧中不再发生了。所以，我想知道，如果我错过了，在某些浏览器中是否仍然会发生这种情况。。并预测这会发生。什么方法是最安全的方法？（当然，在本例中忽略css方法。） js.hide（） js.addClass（'hi

我记得在某个时候Opera

（很可能是Safari。）

有一个问题，如果在元素上使用

.hide（）

，它会在实际隐藏元素之前短暂闪烁

现在，如果你不想忽视那些由于某种原因在浏览器中没有js的人，你就不能真正使用CSS来设置

display:none来隐藏它，然后使用js来淡入
我最近注意到这在歌剧中不再发生了。所以，我想知道，如果我错过了，在某些浏览器中是否仍然会发生这种情况。。并预测这会发生。什么方法是最安全的方法？（当然，在本例中忽略css方法。）
js.hide（）

js.addClass（'hide'）
css.hide{display:none；}

还是别的什么
编辑：
jselement.style.display=“无”

js$（element）.css（{display:“none”}）

Edit2：这个问题实际上可能发生在Safari中。我还认为较新的jquery版本可能已经解决了这个问题。。我认为jquery网站上有一些关于这个问题的错误报告，但我找不到这些错误报告。或者可能是更新的浏览器版本修复了它。。不确定

编辑3：
所以，当我开始在Safari而不是Opera中搜索这个bug时，我确实找到了更多关于这个的信息。虽然我不能肯定这在歌剧中也从未发生过
这个问题似乎已经不存在了，可以安全地使用.hide（）
，但我学到的是，这个$（元素）.css（{display:“none”}）
确实在问题仍然存在的时候解决了问题。
您应该始终依赖于使用jQuery
hide（）
方法隐藏任何元素，因为它负责所有浏览器。不过，我在Opera
中没有看到任何问题
即使要显示任何元素，出于同样的原因，您也应该始终依赖于再次使用show（）
方法
例如，要显示tr
元素，如果我们说tr.css（“display”，“block”）
它在Firefox中不起作用，因为它是一个表行，需要指定为.css（“display”，“table row”）
。但是如果您使用tr.show（）
您就不必担心任何浏览器。
您可以使用noscript提供一个始终显示的替代元素，而JS元素一开始是隐藏的
<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>

或者您可以使用一个没有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>


p、 启用js时启动隐藏{
}
document.styleSheets[0].cssRules[0].style.display=“无”；

如果启用javascript，此文本将被隐藏。

只需在样式表中添加一个display:none，或在元素上添加一个inline style=“display:none”
 element.style.display=“none”
或$（element）.css（{display:“none”}）
也是选项。也许对你决定哪一个更快也很有用，但除此之外，我实际上不知道这个问题：你是想在隐藏它时将它从流中移除，还是只是让它不可见？我更喜欢可见性：在加载过程中隐藏，因为元素保留在内容流中，其他元素不会移动。我是说@Sparky672没有什么区别。。这实际上不会影响闪烁或加载时间。。我相信是这样。不管怎样，如果它的display:none
非常重要，你总是可以把它设计成visibility:hidden
的样子和.css（'display'，''）
显示。@Alxandr在这种情况下可能会工作，但设置.css（'foo'，''）
在所有浏览器中并不完全安全。事实上，我在几年前提交了原型的票证，因为在IE中，将不透明度设置为'
默认为0。在某些浏览器中，设置为空与从不设置它是不同的。（注意，当所述票证作为“预期行为”关闭时，我停止使用prototype，因为prototype将不透明度设置为“”，在IE中将1传递给函数时默认为0）。我在问题中提到了这一点。问题的关键是显示元素是否禁用了javascript，而这在那里不太合适。