Jquery mouseOver/mouseEnter happening when not supposed to

Question

I'm working on a navigation plug-in which takes a list and places each item in its on div which will act like a button. Its similar to a standard drop down menu.

My problem comes in at the function setFocus(). This will take a selected div and add a hover/mouseOver/mouseEnter function.

I list all three because I've tried all three and have the same issue with all of them. If you notice within the function, I currently have it set to alert with the text 'over' when the mouse enters the div.

For some reason, this runs whether or not the cursor has entered the div. When the page loads, even if the cursor isn't within the window space, the alert fires as if the cursor has entered the div and mouseLeave never responds even if you roll over the div. Has anyone else had an issue similar to this? I'm stumped.

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());

This line will be executed when the JavaScript is being parsed i.e immediately. The mouseEnter/Leave code will do this also but there's an alert when setFocus() is called- your second-to-last line.

Answer after above corrections to the question:

The jQuery.hover() function you have used to call the fadeOn/Wipe functions executes those instead of attaching them to the hover events.

The hover callbacks should be inside a closure to avoid being executed when the flow reaches that point:

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

Note: I have added a jQuery.end() after the jQuery.css() call because .css() returns String. You need to bind the hover events to the jQuery object not the string. Find other occurrences you've called .css() and check for this.

The alerts should also be called in a closure, so that they are executed after the elements have completed their fading animation instead of when those fadeOn/Wipe functions are called.

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