So in jQuery, I have a global variable "currentSubNav" that stores a current visible element. The following code executes on "mouseenter".

I need it to get store element's ID, check to see if there was one. If there wasn't, set the new visible element to the default.

$('#mainMenu a').mouseenter(function() {
    var newName = $(this).attr("id");
    if(newName == ''){
        var newName = "default";
    }

Then it checks to see if the new element matches the current one. If so, it returns. If not, it performs the animations to bring in the new one.

    if(newName == currentSubNav){
     return;
    }else{
     $("div[name=" + currentSubNav + "]").animate({"left": "+=600px", "opacity": "toggle"}, "slow");
     $("div[name=" + newName + "]").css({"margin-top": "0"});
     $("div[name=" + newName + "]").fadeIn(2000);
     $("div[name=" + currentSubNav + "]").animate({"left": "-=600px"}, 0);
     currentSubNav = newName;
     return;
    }
});

I'm using Chrome at the moment, and according to the dev tools that isn't what happens.

Problem #1

"$(this).attr("id");" isn't returning undefined as the documentation claims. It seems to be returning "". BUT, when I have the if statement as I do above, it skips over the statement entirely. I set a breakpoint, but it never pauses execuation, so the statement is never evaluated.

Problem #2

After the animations occur, instead of using the return at the end of the statements it goes back and uses the return for the "newName == currentSubNav" if statement. I guess that not a big deal, but it's not the intended behavior.

I'm fairly new to JavaScript, and it appears I'm missing something about how JavaScript works. But I can't find what anywhere. Any help?

Blockquote