javascript - JQuery:为什么 hoverIntent 在这里不是函数？

Question

我正在修改几个月前提出的一个问题的一些代码，但我一直受阻。最重要的是，我将鼠标悬停在 anchor 上，这意味着淡入相应的 div 并将“突出显示”类应用于 anchor 。我可以使用基本 JQuery 并获得“OK”结果，但鼠标事件使用户体验不那么流畅。

我通过 Google API 加载 JQuery 1.3。

而且它似乎有效。我可以使用内置的 hover() 或 mouseover()，并且 fadeIn() 完好无损……没有 JavaScript 错误等。因此，JQuery 本身显然已“加载”。但是我遇到了一个问题，似乎每个人都在推荐hoverIntent解决。

加载 JQuery 后，我加载 hoverIntent JavaScript。我已经对路径进行了三重检查，甚至对路径进行了虚拟验证。我只是看不出有任何合理的方式可以成为路径问题。

一旦(据称)加载了外部 javascript，我将继续我的页面脚本:

var $old=null;

$(function () {
    $("#rollover a").hoverIntent(doSwitch,doNothing)
    });

function doNothing() {};
function doSwitch() {       
        var $this = $(this);
        var $index = $this.attr("id").replace(/switch/, ""); //extract the index number of the ID by subtracting the text "switch" from its name
        if($old!=null) $old.removeClass("highlight"); //remove the highlight class from the old (previous) switch before adding that class to the next
        $this.addClass("highlight"); //adds the class "highlight" to the current switch div
        $("#panels div").hide(); //hide the divs inside panels
        $("#panel" + $index).fadeIn(300); //show the panel div "panel + number" -- so if switch2 is used, panel2 will be shown
        $old = $this; //declare that the current switch div is now "old". When the function is called again, the old highlight can be removed.
        };

我得到错误:

Error: $("#rollover a").hoverIntent is not a function

如果我更改为悬停等已知工作功能(只需将“.hoverIntent”更改为“.hover”)，它就会再次“工作”。我确定这是一个基本问题，但我完全是个黑客(正如您在我的代码中看到的那样)。

现在，就所有外观而言，它看起来像是路径错误(我进行了无数次检查，甚至将其放在带有我仔细检查过的 HTTP 链接的外部站点上；这没有错)，或者 . js没有声明函数。如果是后者，我一定是遗漏了几行代码来使该功能可用，但我在作者的网站上找不到任何东西。在他的源代码中，他使用了 $(document).ready，我也试图模仿它，但也许我也做错了。

同样，奇怪的一点是 .hover 可以正常工作，而 .hoverIntent 则不能。我不明白为什么它不被视为函数。

尽量避免遗漏任何东西……让我们看看……没有其他 JavaScript 被调用。这篇文章包含该页面使用的所有 Javascript...我尝试按照作者的 var 配置示例进行操作(hoverIntent 仍然不是函数)。

我有一种痒痒的感觉，我只是错过了一行来声明函数，但我终究无法弄清楚它是什么，或者为什么它还没有在外部 .js 文件中声明。感谢您的任何见解! 格雷格

---

更新:

最奇怪的是，因为我在做这件事......实际上，如果这个问题得到解决，我可能不需要解决 hoverIntent:

我向“doNothing”函数添加了一个警告，然后恢复为普通的旧 .hover，只是为了看看发生了什么。对于我的 5 个 anchor 中的 2 个，只要我悬停，就会调用 doNothing() 并且我会看到警报。对于其他 3 个，doNothing() 在 mouseout 之前不会正确调用。如您所见，相同的功能应该适用于“rollover”div 内的任何 anchor 。我不知道为什么它是特别的。

但是:

1. 如果我将 fadeIn 更改为另一种效果(如 slideDown)，doNothing() 直到 mouseout 才会正确调用。
2. 使用 fadeIn 时，doNothing() 在 Opera 中不会被调用，但似乎在几乎所有其他浏览器中都会被调用。

fadeIn 本身是否有问题，或者只是我需要向它传递一个适当的回调？如果是这样，我不知道那个回调会是什么。

为您长时间的注意力干杯...

格雷格

Answer 1

希望我没有浪费太多人的时间...

事实证明，第二个问题也是在距离屏幕 2 英尺的地方。我怀疑这可能与 HTML/CSS 有关，因为奇怪的是，5 个元素中只有 2 个表现出奇怪的行为。

因此，检查我的代码，找出我们的 friend FireBug，发现我正在将鼠标悬停在另一个与我的滚动 div 重叠的 div 上。原因是？在 CSS 中，我将其称为 .panels 而不是 .panel，类名是 .panel。因此，它使用了 div 的默认值……即。 100% 宽度...

问题得到了回答...“更加小心”

Matt 和 Mak 强制我多次检查我的代码，果然我在加载另一个插件并插​​入我自己的代码后重新加载了 JQuery。由于 hoverIntent 修改了 JQuery 的 hover() 才能工作，重新加载 JQuery 搞砸了。

那解决了，逻辑决定我重新检查我的 HTML/CSS 以调查我的 fadeIn() 怪异......果然，我在一个类中有一个拼写错误导致了一些破坏。

笨笨笨笨...但现在我可以 sleep 了。