悬停时jQuery中第156行出现奇怪错误答案

【问题标题】：Weird error on line 156 in jQuery when hover悬停时jQuery中第156行出现奇怪错误
【发布时间】：2011-06-07 06:01:41
【问题描述】：

问题：

网站可在 Firefox、Chrome、Safari 中运行，但不能在 IE（7 和 8）中运行。
modernbrowsereffects.js 中的第 1 行字符 1 处出错 - 但为什么？
将鼠标悬停在左侧菜单上时会出现更多错误

编辑：

我想我抓住了罪人！但我似乎无法找到如何解决它。当我从 JS 文件中删除它时，一切都像魅力一样：

//Left menu :hover-effect
$('ul.menu li a:not(.active)') 
    .css({backgroundPosition: '262px 12px'}) 
    .mouseover(function(){ 
       $(this).stop().animate({backgroundPosition: '248px 12px'})
       })
    .mouseout(function(){ 
       $(this).stop().animate({backgroundPosition: '262px 12px'}) 
});

//Left menu :hover-effect (Child)
$('ul.menu li ul li a:not(.active)')
    .css({backgroundPosition: '262px 7px'}) 
    .mouseover(function(){ 
       $(this).stop().animate({backgroundPosition: '248px 7px'})
       })
    .mouseout(function(){ 
       $(this).stop().animate({backgroundPosition: '262px 7px'}) 
});

详细说明：
我在this page I've done 上遇到了这个非常奇怪的问题。

我有一个名为 ModersBrowserEffects.js 的 JS 文件，我在该文件中为网站制作了很多效果。动画等。

它在除 IE 之外的所有浏览器中都运行良好，甚至 IE8 也不行。

它说错误出现在 ModersBrowserEffects.js 中的第 1 行和第 1 个字符处，但我不明白为什么 $ 应该是错误？？

如果这还不够...如果您将鼠标悬停在左侧菜单（具有动画背景位置，在 ModernBrowserEffects.js 中指定），则会出现许多新错误。现在它的 jQuery 在第 156 行有一些错误......

【问题讨论】：

你确定JS文件上没有BOM？还是编码正确（或者 IE 支持）？
成功了。奇怪的是，完全相同的 JS 文件正在离线工作。什么是物料清单？我尝试下载 jQuery 而不是使用 Google 上的那个。没有运气。
在 Safari 控制台中我看到一个错误“modernBrowserEffects.js:140 TypeError: '...})(jQuery)...'[[object Object]] 不是函数。”可能是在您的生产环境中，您的脚本所期望的某些对象不存在。
BOM（字节顺序标记）是文件开头的几个字节，用于提供一些编码信息。由于错误出现在第一个字符上，我认为它可能是相关的。但显然，只有 IE 不擅长报告错误。

标签： javascript jquery internet-explorer error-handling

【解决方案1】：

IE 不允许/不应该让您直接以这种方式为背景位置设置动画。显然你可以使用 CSS Hooks 来做到这一点，但我还没有尝试过。如果您关注this link，则会有更详细的答案以及一个插件链接，该插件将为您提供此功能。

有趣的是，如果您将 jQuery 版本更改为 1.4.2，它应该可以工作。见example

【讨论】：

【解决方案2】：

问题出在脚本上，正如 EDIT 中所写的那样。我已经重写了脚本，所以它现在没有任何错误。但现在它在 IE 中没有动画。它在所有其他浏览器中都有。脚本：

//Leftmenu :hover-effect
    $('ul.menu li a:not(.active)').css({backgroundPosition: '262px 12px'});
    $('ul.menu li a:not(.active)').hover(function() {
          $(this).stop().animate({backgroundPosition: '248px 12px'}, 150); 
      }, function() {
          $(this).stop().animate({backgroundPosition: '262px 12px'}, 150); 
    }); 

//Leftmenu :hover-effect (Child)
    $('ul.menu li ul li a:not(.active)').css({backgroundPosition: '262px 7px'});
    $('ul.menu li ul li a:not(.active)').hover(function() {
          $(this).stop().animate({backgroundPosition: '248px 7px'}, 150); 
      }, function() {
          $(this).stop().animate({backgroundPosition: '262px 7px'}, 150); 
    });

错误已解决，但谁能告诉我为什么它在 IE 中无法动画？

【讨论】：

【解决方案3】：

您遇到了路径问题，您在 HTML 中使用了相对路径。

// this one is absolute
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">   </script>

// these are relative
<script type="text/javascript" src="/scripts/jquery.example.js"></script>
<script type="text/javascript" src="/scripts/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="/scripts/topbillede.js"></script>
<script type="text/javascript" src="/scripts/slimbox2.js"></script>    
<script type="text/javascript" src="/scripts/modernBrowserEffects.js"></script>

因此，当您在首页时，浏览器将加载存在的 http://bevola.dk/scripts/modernBrowserEffects.js，但是当您在子页面上时，浏览器将尝试加载 http://bevola.dk/om-bevola/koncepter/globalpartner/scripts/modernBrowserEffects.js，这将引发 404 Error .

让你的脚本路径绝对来修复它：

<script type="text/javascript" src="http://bevola.dk/scripts/modernBrowserEffects.js"></script>

为什么它只在 IE 中中断？我猜只有 IE 使用了无法加载的部分脚本。

【讨论】：

相对路径从来没有问题。请注意，有一个“/”表示永远不会出现 404 错误。问题出在已发布的代码中，位于顶部我的第一篇文章的“编辑”标题下方。当我删除这段代码时，一切都像魅力一样。

【解决方案4】：

尝试删除文件末尾的以下代码

(jQuery)

【讨论】：

我试过这个，但它不起作用。我还尝试删除所有其他 JS 文件，但没有运气。
当我尝试这个时，只有 jQuery 文件会产生错误。所有这些都在第 156 行。