使用悬停滚动菜单样式

时间:2013-08-16 21:41:22

标签: javascript jquery html css jquery-ui

需要帮助。 我在悬停事件中制作了一些带垂直滚动的菜单,有3个菜单(家庭,下载,联系)。对悬停事件的滚动效果已经起作用,但是在单击事件时,当单击其他菜单时,会发生一些错误(某些菜单无法向下滚动/滚动到带动画的灰色面)。当我按某种顺序点击菜单时会发生错误: 1.下载然后联系 2.联系然后下载 3.联系然后回家

这是jsFiddle

中的代码

当我使用firebug在firefox上运行代码时,鼠标悬停并在单击的菜单上将鼠标移出后会出现一些错误。

错误打印屏幕

http://i.stack.imgur.com/PchXy.png

感谢提前:)

1 个答案:

答案 0 :(得分:0)

当您单击菜单时冻结滚动事件的原因是,在您单击后,菜单将被禁用,因此您的background-pos永远不会更改,因此方法css(bg-pos)变为undefined并且您再次尝试(undefined).split(),这是不可能的,因此动画会冻结。

您需要做的是点击,您需要再次启用菜单。这是通过以下代码完成的:

$.fn.stopBG = function (x, y, speed) {
    if(event.which == 1){
        $("#home").removeClass('disable1').addClass('enable1');
        $("#download").removeClass('disable2').addClass('enable2');
        $("#contact").removeClass('disable3').addClass('enable3');
    }
    var pos = this.css('background-position').split(' ');

我已经更新了你的小提琴,请看这个:http://jsfiddle.net/VSTAm/3/

我在Chrome中尝试过这个修复程序......它在那里正常工作。