JQuery:为什么hoverIntent不是这里的函数?

时间:2009-08-06 06:41:51

标签: javascript jquery jquery-plugins hoverintent

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

我通过Google API加载JQuery 1.3。

它似乎有效。我可以使用内置的hover()或mouseover(),而fadeIn()是完整的......没有JavaScript错误等等。所以,JQuery本身显然是“加载”的。但是我遇到了一个问题,似乎每个人都在建议hoverIntent来解决。

加载JQuery后,我加载了hoverIntent JavaScript。我已经对路径进行了三次检查,甚至对路径进行了虚拟校对。我只是没有看到任何合理的方式它可以成为道路问题。

一旦外部javascripts(据称)被加载,我继续我的页面脚本:

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

如果我改为像hover一样的已知工作函数(只需将“.hoverIntent”更改为“.hover”),它就会再次“工作”。我确定这是一个基本问题,但是在这方面我完全是一个黑客(正如你的代码所见)。

现在,对于所有的外观,它看起来像路径是错误的(我已经检查过,甚至把它放在一个带有我仔细检查的HTTP链接的外部网站上;它没有错),或者。 js没有声明该函数。如果是后者,我必须缺少几行代码才能使该功能可用,但我在作者的网站上找不到任何内容。在他的源代码中,他使用$(document).ready,我也试图模仿,但也许我做错了。

同样,奇怪的是.hover工作正常,.hoverIntent没有。我无法弄清楚为什么它不被认为是一种功能。

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

我感到痒的感觉我只是缺少一行来声明这个函数,但我不能为我的生活弄清楚它是什么,或者为什么它还没有在外部.js文件中声明。感谢您的任何见解! 格雷格


更新

最奇怪的事情,因为我在上面......实际上,如果这个问题得到解决,我可能不需要hoverIntent解决了:

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

可是:

  1. 如果我将fadeIn更改为slideDown之类的其他效果,则在鼠标输出之前,doNothing()不会被正确调用。
  2. 使用fadeIn时,doNothing()不会在Opera中被调用,但似乎在几乎所有其他浏览器中都被调用。
  3. fadeIn本身是否有可能是错误的,或者只是我需要传递适当的回调?我不知道回调是什么,如果是的话。

    为你的长期关注而欢呼......

    格雷格

1 个答案:

答案 0 :(得分:1)

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

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

所以,检查了我的代码,挖出了我们的朋友FireBug,发现我正在徘徊在另一个与我的翻转div重叠的div上。原因是什么?在CSS中我称之为.panels而不是.panel,而类名是.panel。所以,它使用div的默认值...即。 100%宽度......

回答问题......“要小心点”

Matt和Mak强迫我检查我的代码,确定我在加载另一个插件并插​​入自己的代码后重新加载了JQuery。由于hoverIntent修改了JQuery的hover()以便工作,因此重新加载JQuery会破坏它。

解决了,逻辑决定我重新检查我的HTML / CSS,以便调查我的fadeIn()怪异......当然,我在一个类中引起了一些混乱,造成了一些破坏。

愚蠢的哑巴......但现在我可以睡觉了。