jquery - .mouseleave .mouseenter jquery 动画冲突

Question

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

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

Answer 1

看起来问题出eachDelay在菜单“mouseleave”功能中的功能。延迟将导致您的#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");在您的脚本中执行动画的点上使用，这样您就可以打开浏览器控制台并判断事情的顺序是否有点偏离。