jQuery，准备就绪时隐藏元素总是在页面加载时跳跃。如何避免这种情况？答案

【问题标题】：jQuery, Hiding elements on ready is always jumping on page load. how can this be avoided?jQuery，准备就绪时隐藏元素总是在页面加载时跳跃。如何避免这种情况？
【发布时间】：2010-04-29 15:37:30
【问题描述】：

这是代码。

我不能申请display:none;

$(document).ready(function() {
    $("#LeftNav li.navCatHead").not(":first").siblings("li").hide().end().end().first().addClass("open");
});

【问题讨论】：

使用 CSS 是我的建议，但你说你不能？
你能在#leftNav div上设置任何CSS，还是不显示：无？

标签： jquery css document-ready

【解决方案1】：

为什么不能设置“display:none”？不确定您的方案，但您可能可以稍微反转工作流程

而不是最初显示列表，然后根据某些条件隐藏某些列表，尝试最初隐藏（显示：无）列表，然后根据某些条件显示某些列表。

这样你就不会得到一些“先显示后消失”的元素。

【讨论】：

【解决方案2】：

与其应用display:none，（调用$.hide()），不如用一个空的div替换你试图隐藏的项目，该div设置为与你试图隐藏的任何东西相同的大小？

【讨论】：

【解决方案3】：

不要等待文件准备好。您可以将您的 jQuery 代码放在页面底部的结束 body 标记之前，或者直接放在相关元素之后。

            <!-- ...other code... -->
            <li>Sibling</li>
        </ul>
        <script type="text/javascript">
            // this should work...
            $("#LeftNav li.navCatHead").not(":first").siblings("li").hide().end().end().first().addClass("open");
        </script>
        <div class='content'>more stuff.</div>
    </body>
</html>

【讨论】：

【解决方案4】：

我经常发现display:none; 的一个不错的替代方法是在加载时将不透明度设置为 0。

$("#LeftNav li.navCatHead").not(":first").siblings("li").css('opacity','0').end().end().first().addClass("open");

但与其使用这么长的字符串来查找选择器，我只需为每个选择器添加一个新类，并在页面加载时将其设置为 opacity: 0;，因为它会快得多。

【讨论】：

【解决方案5】：

我遇到了同样的问题，我使用了 JQuery 的 .hide() 函数，但是因为我将 <script> 放在了正文的末尾，所以元素在瞬间可见，直到浏览器可以到达代码末尾并运行隐藏函数。

对于解决方案，我提高了.hide() 函数的速度，直到它快到用户看不到它为止。

它对我有用。

所以现在我的函数看起来像这样。

    $(document).ready(function(){
        $("#ids-or-classes").each(function(){ //.each is for multiple ids and classes 
        $(this).hide(0.00001); //lower the number faster the speed
        });
    });

希望它有所帮助，这是我第一次回答关于我们最喜欢的社区的问题。干杯。

【讨论】：