Question

我在网站上通过jQuery使用图像交叉淡入淡出方法。出于保密原因，我无法发布网站的整个代码，但这里是交叉推子的Javascript（基于this reference）：

     <script type="text/javascript">
        $(function () {
          if ($.browser.msie && $.browser.version < 7) return;        
          $('#nav li')    
            .removeClass('highlight').find('a').append('<span class="hover" />').each(function () {
              var $span = $('> span.hover', this).css('opacity', 0);
              $(this).hover(function () {
                $span.stop().fadeTo(250, 1);
              }, function () {
                $span.stop().fadeTo(250, 0);
              });
            });
        });
     </script>

它适用于所有浏览器 - 包括在我的测试PC上安装IE7。但是，在使用IE7的其他PC上，效果有时会失败。图像将加载，但将鼠标悬停在它们上方不起作用。这意味着JS并非彻底失败 - 在这种情况下，翻转仍然有效，只是没有褪色。相反，似乎IE7正在删除“突出显示”类，但随后停止。

真正离奇的部分？失败是100％随机的。如果我刷新窗口，有时效果会很好。怎么会这样？

更新：我已经确定问题出在某个地方，因为AJAX脚本正在为网站提供动力。删除所有AJAX并将其替换为静态内容可消除错误。我的理论是，当页面加载时，有时AJAX内容在图像加载之前完成。这使IE7吓坏了，放弃了交叉渐变效果。如果我认为这是问题所在，问题是：我该如何解决？

更新2：使用Fiddler进一步深入兔子洞，我注意到IE7中每个成功加载效果的一致性：我正在使用的主图像的加载悬停中止，然后再次加载。当效果不成功时，不会发生这种情况。换句话说，强制浏览器使用简单的jQuery预加载器功能预加载图像，每次都会破坏IE7中的交叉效果，而不是当前的零星工作状态。

这对我来说太奇怪了甚至不理解，但任何想法都是受欢迎的。

Answer 1

在调用ready函数之前是否包含了CSS？来自the docs：

注意：请确保在脚本之前包含所有样式表（尤其是那些调用ready函数的样式表）。这样做将确保在jQuery代码开始执行之前正确定义所有元素属性。如果不这样做将导致偶发问题，尤其是在基于WebKit的浏览器（如Safari）上。

我知道IE不是基于WebKit的，但值得检查。

JQuery问题：脚本（有时）失败（某些版本）IE7

1 个答案: