4

我正在根据几个月前提出的问题修改一些代码,但我一直受到阻碍。底线是,我将鼠标悬停在 Anchors 上,这意味着淡入相应的 div 并将“highlight”类应用于 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.
        };

我得到错误:

错误:$("#rollover a").hoverIntent 不是函数

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

现在,从所有外观来看,它似乎要么路径错误(我已经检查了无数次,甚至将它放在带有我仔细检查的 HTTP 链接的外部站点上;它没有错),或者 .js 没有t 声明函数。如果是后者,我一定是遗漏了几行代码才能使该功能可用,但我在作者的网站上找不到任何东西。在他的源代码中,他使用了一个 $(document).ready,我也试图模仿它,但也许我也做错了。

同样,奇怪的是 .hover 工作正常, .hoverIntent 没有。我不明白为什么它不被认为是一个函数。

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

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


更新:

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

我在“doNothing”函数中添加了一个警报,并恢复为普通的旧 .hover,只是为了看看发生了什么。对于我的 5 个锚点中的 2 个,只要我悬停,doNothing() 就会被调用并且我会看到警报。对于其他 3 个,doNothing() 正确地在鼠标移出之前不会被调用。如您所见,相同的功能应该适用于“翻转”div 内的任何 Anchor。我不知道为什么它是特别的。

但:

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

是否有可能是 fadeIn 本身是错误的,或者只是我需要传递一个适当的回调?如果是这样,我不知道那个回调会是什么。

为您的长期关注干杯...

格雷格

4

1 回答 1

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() 怪异......果然,我在一个类中出现了一个错字,造成了一些破坏。

哑哑哑……但现在我可以睡觉了。

于 2009-08-06T08:07:14.920 回答