我正在开发一个导航插件，该插件接受一个列表，并将每个项目放置在其上的div中，这将起到按钮的作用。它类似于标准的下拉菜单。
我的问题出现在函数setFocus()中。这将使用一个选定的div，并添加一个hover/mouseOver/mouseEnter函数。
我把这三个都列了出来，因为我试过这三个，但都有同样的问题。如果你在函数中注意到，我目前已经将其设置为当鼠标进入div时用文本"over"提醒。
出于某种原因，无论光标是否已进入div，都会运行此操作。当加载页面时，即使光标不在窗口空间内，也会像光标已进入div一样触发警报，即使您滚动到div上，mouseLeave也不会响应。其他人有类似的问题吗？我被难住了。
http://jsfiddle.net/cFEdb/5/
var divCode = String();
//grab each list item and put it in its own div
$('#nav li').each(function() {
divCode += "<div>" + $(this).html() + "</div> ";
});
//get rid of the list and replace it with a plane ol' div
//then fill that it with our new "button" divs
$('#nav').replaceWith('<div id="newNav"> </div)');
$('#newNav').html(divCode);
//add some functionality to the divs
$('#newNav div').addClass('fader')
.each(function() {
if ($(this).css('position')!='relative' || $(this).css('position')!='absolute'){
$(this).css('position','relative');
}
})
.css('cursor', 'pointer')
.click(function() {
switchDivs($(this));
});
//set the min-height of the nav div
$('#newNav').css('minHeight', $('#newNav').height());
setFocus($('#newNav div').first());
$('.fader').hide();
function fadeOn(speed) {
$('.fader').fadeTo(speed, 100);
alert('over');
}
function fadeWipe(speed) {
$('.fader').fadeTo(speed, 0);
alert('out');
}
function setFocus(obj) {
obj.removeClass('fader')
.addClass('focus')
.css('backgroundColor', 'red')
.hover(fadeOn(500),fadeWipe(500));
}
function switchDivs(obj2) { //obj2 is the object to become the focus div
var obj1 = $('.focus');
//if the two objects are the same, quit
if (obj1.text() == obj2.text()) {
return;
}
var oneOff = obj1.offset();
var oneDirectionY = "-"; //lol...one direction
var twoOff = obj2.offset();
var twoDirectionY = "-";
var movementTotalY = 0;
if (oneOff.top <= twoOff.top) {
oneDirectionY = "+";
movementTotalY = twoOff.top - oneOff.top;
} else {
twoDirectionY = "+";
movementTotalY = oneOff.top - twoOff.top;
}
var oneDirectionX = "-"; //lol...one direction
var twoDirectionX = "-";
var movementTotalX = 0;
if (oneOff.left <= twoOff.left) {
oneDirectionX = "+";
movementTotalX = twoOff.left - oneOff.left;
} else {
twoDirectionX = "+";
movementTotalX = oneOff.left - twoOff.left;
}
obj1.animate({ top : oneDirectionY+"="+movementTotalY+"px",
left : oneDirectionX+"="+movementTotalX+"px"
},1500);
obj2.animate({ top : twoDirectionY+"="+movementTotalY+"px",
left : twoDirectionX+"="+movementTotalX+"px"
},1500);
//remove focus from object 1
obj1.removeClass('focus')
.addClass('fader');
//add focus to object 2
obj2.removeClass('fader')
.addClass('focus');
}
})；
setFocus($('#newNav div').first());
这一行将在解析JavaScript时执行，即立即执行。mouseEnter/Leave代码也会执行此操作，但当调用setFocus()时会发出警报，这是倒数第二行。
对问题进行上述更正后的回答：
用于调用fadeOn/Wwipe函数的jQuery.hooper()函数执行那些，而不是将它们附加到悬停事件。
悬停回调应该在闭包内，以避免在流到达该点时执行：
function setFocus(obj) {
obj.removeClass('fader')
.addClass('focus')
.css('backgroundColor', 'red')
.end()
.hover(function() {
fadeOn(500);
},
function() {
fadeWipe(500);
});
}
注意：我在jQuery.css()调用之后添加了一个jQuery.end()，因为.csv()返回String。您需要将悬停事件绑定到jQuery对象，而不是字符串。查找您调用过的其他事件.css()并检查是否存在此情况。
还应在闭包中调用警报，以便在元素完成其渐变动画后执行警报，而不是在调用fadeOn/Wwipe函数时执行警报。
function fadeOn(speed) {
$('.fader').fadeTo(speed, 100, function() {
alert('over');
});
}