0

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

 }

});​</p>

4

1 回答 1

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

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

在对问题进行上述更正后回答：

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

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

    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');
        });
    }​
于 2012-11-23T20:19:43.327 回答