Question

我正在开发一个导航插件，它接受一个列表并将每个项目放在它的div上，就像一个按钮。它类似于标准的下拉菜单。

我的问题来自函数setFocus（）。这将选择一个div并添加一个hover / mouseOver / mouseEnter函数。

我列出了所有这三个，因为我已经尝试了所有三个并且所有这些都有相同的问题。如果你在函数中注意到，我当前将它设置为当鼠标进入div时文本“over”发出警报。

由于某种原因，无论光标是否已进入div，都会运行此命令。当页面加载时，即使光标不在窗口空间内，警报也会触发，就像光标已进入div一样，即使翻转div，mouseLeave也不会响应。还有其他人有类似的问题吗？我很难过。

 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()返回String。您需要将悬停事件绑定到jQuery对象而不是字符串。找到你调用.css（）的其他事件并检查它。

还应在闭包中调用警报，以便在元素完成其淡入淡出动画而不是之后执行这些警报。

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

Jquery mouseOver / mouseEnter当不应该发生时

1 个答案: