Question

http://apw-design.com/ Taking a look at this webpage, I have a div id which starts off as a thin line across the page. When the mouse enters the menu the box moves across it and across part of the logo, when the mouse then enters the logo directly from the menu it changes color correctly but uses the mouse leave animation from the menu. If you scroll from the page across to the logo, it shows what the box should transform to.

The scrip for the animations is below:
http://pastebin.com/wU4c10NJ
I’ve uploaded the css file as well for reference:
http://pastebin.com/RgWZQTD9

Answer 1

It looks like the problem is your eachDelay function inside your menus ‘mouseleave’ function. The delay will cause your #whiteline animation to fire after your logos ‘mouseenter’ function. Heres the chain of events:

1. Menu mouseleave fires
2. Menu eachDelay loops through menu items
3. Logo mouseenter fires
4. Menu eachDelay reaches last item and overrides Logo mouseenter

What you could do is introduce a variable to check if the menu no longer has focus and only fires the #whiteline animation if the cursor isn’t on the logo. Here’s a simplified example:

// Create a variable to check cursor focus
var lastFocus = "";

$('#menu').mouseenter(function(element) {
    lastFocus = "menu";
    // PLUS YOUR CODE
});

$('#logo').mouseenter(function(element) {
    lastFocus = "logo";
    // PLUS YOUR CODE
}); 

$('#menu').mouseleave(function(element) {
    $("#menu ul li").eachDelay(function(index){
        if(index == $("#menu ul li").size() -1){
            // Check if we haven't hovered over the logo whilst the delay was running
            if(lastFocus == "menu"){
                // Do the animation
            }
        }
    }, 30);
});

A useful debugging tip is to use console.log("Event foo fired"); at the points in your script that do the animation, that way you open your browser console and tell if the order of things is a little off.