.mouseleave .mouseenter jquery动画冲突

Question

http://apw-design.com/ 看一下这个网页，我有一个div id，它在整个页面上以细线开头。当鼠标进入菜单时，框会移过它并穿过徽标的一部分，当鼠标直接从菜单中输入徽标时，它会正确地改变颜色，但是使用菜单中的鼠标离开动画。如果您从页面滚动到徽标，它会显示框应转换为的内容。

动画的脚本如下：     http://pastebin.com/wU4c10NJ 我上传了css文件以供参考： http://pastebin.com/RgWZQTD9

Answer 1

看起来问题是菜单'mouseleave'功能中的eachDelay功能。延迟将导致#whiteline动画在您的徽标'mouseenter'功能之后触发。下面是事件链：

1. 菜单mouseleave触发
2. 菜单eachDelay循环显示菜单项
3. 徽标mouseenter触发
4. 菜单eachDelay到达最后一项并覆盖徽标mouseenter

你可以做的是引入一个变量来检查菜单是否不再具有焦点，如果光标不在徽标上，则仅触发#whiteline动画。这是一个简化的例子：

// 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);
});

一个有用的调试技巧是在脚本中执行动画的点使用console.log("Event foo fired");，这样就可以打开浏览器控制台并判断事物的顺序是否稍微偏离。