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

4
我正在修改几个月前提出的一个问题的一些代码,但我一直被卡住。关键是,我将鼠标悬停在锚点上,这意味着淡入相应的div,并且还将“highlight”类应用于锚点。我可以使用基本的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却不能。我无法弄清楚为什么它不被视为函数。
试图避免遗漏任何内容...让我们看看...没有其他JavaScript被调用。此帖子包含页面使用的所有Javascript...我尝试按照作者的var config示例执行它(hoverIntent仍然不是函数)。

我有一种痒痒的感觉,好像只是缺少一个声明函数的语句,但我怎么也想不出来是什么,或者为什么它没有在外部的.js文件中声明。谢谢任何见解! Greg


更新:

最奇怪的是,自从我开始使用它......实际上,如果这个问题解决了,我可能就不需要解决hoverIntent了:

我向“doNothing”函数添加了一个警报并回到了普通的.hover状态,只是想看看发生了什么。对于我的5个锚点中的2个,在我悬停时,doNothing()被调用并出现了警报。对于其他3个锚点,doNothing()正确地在鼠标移开之前没有被调用。如您所见,同样的函数应该适用于“rollover”div内的任何Anchor。我不知道为什么它会挑剔。

但是:

  1. 如果我将fadeIn更改为另一种效果,例如slideDown,则doNothing()将在鼠标移开之前正确地不被调用。
  2. 当使用fadeIn时,doNothing()在Opera中不会被调用,但似乎在几乎所有其他浏览器中都会被调用。

fadeIn本身是否有bug,还是我只需要传递一个合适的回调?如果是这样,我不知道那个回调会是什么。

感谢您长时间的关注......

Greg


你能告诉我们你的页面在哪里吗?或者可以贴出HTML源代码吗? - pixeline
你确定你有hoverIntent JavaScript的引用吗?一定要确认一下。 :) - Matt Sherman
检查您加载库的顺序。 应该是:jQuery,hoverIntent,yourCode。 只是为了确保。 - Maxim Sloyko
哇塞...我应该做好尽职调查,而不是纠结了这么久...在我的实验过程中,我从Google APIs中删除了JQuery的加载。然后我可能又重新添加了它。原始版本被推得太低了,以至于我忘记/忽略了它的存在,潜伏在下面...好吧,谢谢你坚持让我重新检查!至少我可以停止抓狂了。我已经没有多少头发了。简而言之,问题在于我加载了JQuery,加载了hoverIntent,并重新加载了JQuery。显然这样做是不对的。感谢您的时间! - Greg
虽然我仍然在使用hover或hoverIntent时遇到fadeIn的问题。我将重新调整标记和CSS,看看是否有一些与我的布局方式相关的怪异之处,或者是否需要指定回调才能使fadeIn正常工作。 - Greg
1个回答

1

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

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

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

问题得到解答..."要更加小心"

Matt和Mak强制我反复检查我的代码,果然,在加载另一个插件并插入自己的代码后,我重新加载了JQuery。由于hoverIntent修改了JQuery的hover()以使其工作,重新加载JQuery会把它搞砸。

解决了这个问题,逻辑上讲,我需要重新检查我的HTML/CSS以调查我的fadeIn()的怪异行为...果然,我在一个类中打了一个错字,引起了一些混乱。

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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接