文档上的jQuery准备好我的选择不透明度:0，IE延迟？

Question

在文档就绪时，我选择了将元素不透明度设置为0，然后将它们设置为1。这在Safari和FF上很好用，但在IE中，在窗口就绪时，我看到元素在javascript应用到它们之前就出现了。有什么建议吗？我必须通过css将它们的可见性都设置为none？

谢谢你d

var i = 0;
$mySelection.each(function() {
$(this).css("opacity","0"); // qui hide
$(this).delay((i * 100) + ($mySelection.length)).animate({ opacity: "1"}, {queue:true, duration:1000, easing:"quartEaseIn"}); 
        i++;
    })

Answer 1

您应该在css中将元素设置为"display:none“。那么你的元素从一开始就是不可见的。

但是如果你在你的就绪脚本中将它们设置为不透明:0，你就不能控制你的浏览器何时执行这些命令。如果您的浏览器在页面加载10毫秒后运行您的ready-script，您将看到这些元素。

Answer 2

这是一个经典的问题：

如果启用了Javascript，您希望某些HTML元素不可见，但如果没有JS，则希望HTML元素可见。(比你做一个动画，但这不是问题)

另一件好事是将尽可能多的样式放在CSS文件中，而不是放在JS脚本中。

因此，一个好的解决方案是能够在CSS中说：“如果启用了javascript，则应用此样式”。

为此，我通常在HTML头部分使用一小段代码：

<script type="text/javascript">
    //<![CDATA[
        document.documentElement.className='js'
    //]]>
</script>

如果启用了javascript，这将在标记中添加一个"js“className。

你可以在你的CSS文件中使用这个"js“className来定义一些样式，以防Javascript被启用。此CSS将在HTML加载期间处于活动状态，因此您不必等待DOM准备好开始使用JS应用样式。这样，你就有了更好的加载体验。

CSS示例：

#MyappearingElement { display: block; }
.js #MyappearingElement { display: none; }

使用这段CSS，只有当Javascript被禁用时，元素才会在页面加载时可见。如果启用了Javascript，则不会显示该元素，因此我可以制作一个不错的动画来显示它。