Jquery mouseOver/mouseEnter 在不应该发生时发生

Question

我正在开发一个导航插件，它接受一个列表并将每个项目放在其上的 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');

 }

});​

Answer 1

setFocus($('#newNav div').first());

这一行将在 JavaScript 被解析时执行，即立即执行。 mouseEnter/Leave 代码也会执行此操作，但在调用 setFocus() 时会发出警报 - 您的倒数第二行。

以上问题更正后回答：

您用来调用fadeOn/Wipe 函数的jQuery.hover() 函数执行那些而不是将它们附加到悬停事件。

悬停回调应该在closure 内以避免在流程到达该点时被执行：

    function setFocus(obj) {
        obj.removeClass('fader')
        .addClass('focus')
        .css('backgroundColor', 'red')
        .end()
        .hover(function() {
                fadeOn(500);
               }, 
               function() {
                fadeWipe(500);
               });
    } ​

注意：我在 jQuery.css() 调用之后添加了一个 jQuery.end()，因为 .css() 返回字符串。您需要将悬停事件绑定到 jQuery 对象而不是字符串。查找您调用 .css() 的其他匹配项并检查。

警报也应该在闭包中调用，以便在元素完成其淡入淡出动画之后执行它们而不是在调用淡入淡出/擦除函数时。

    function fadeOn(speed) {
        $('.fader').fadeTo(speed, 100, function() {
            alert('over');
        });
    }​