文档上的 jQuery 准备好我的选择 opacity:0，IE 延迟？答案

【问题标题】：jQuery on document ready my selection opacity:0, IE delay?文档上的 jQuery 准备好我的选择 opacity:0，IE 延迟？
【发布时间】：2010-12-03 21:24:44
【问题描述】：

在准备好文档时，我已经选择了设置元素 opacity:0 并将它们设置为 1 的动画。在 Safari 和 FF 上很好，但在 IE 上的窗口准备好我看到元素出现在 javascript 应用到它们之前的片刻。有什么建议吗？我必须通过 css 为所有这些设置不可见性？

谢谢 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++;
    })

【问题讨论】：

提示一下，.each() 的第一个参数是索引，使用.each(function(i) {... 并去掉你自己的i :)
谢谢尼克，你说得对！这仍然不能解决我的问题

标签： jquery internet-explorer window opacity

【解决方案1】：

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

但是，如果您在准备好的脚本中将它们设置为 opacity:0，您将无法控制浏览器“何时”执行这些命令。如果您的浏览器在页面加载后仅 10 毫秒运行您的就绪脚本，您会看到这些元素。

【讨论】：

【解决方案2】：

这是一个经典问题：

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

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

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

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

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

如果启用了 javascript，这将在标签中添加一个“js”类名。

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

CSS 示例：

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

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

【讨论】：