Javascript jQuery动画粘贴在快速悬停上

如果将鼠标缓慢悬停在元素上，动画将正常工作。绿色层从左侧重叠，然后从顶部，黄色层与绿色层重叠。当鼠标离开元素时，该重叠应自行撤消，首先撤消黄色重叠，然后撤消绿色重叠

但是，如果光标悬停在其上的速度过快，动画将停留在黄色重叠上，直到您重新鼠标悬停，然后鼠标移出。我已经尝试在每个

.animate

方法之前添加

.stop（false，true）

jQuery方法，我所读的方法已经解决了类似的问题，但这不起作用。我通过在

.animate

函数之前链接它来尝试它，我在所有函数上以及

.stop（true，true）上尝试了它的所有变体

如果鼠标悬停部分没有在光标离开元素之前完成，有没有办法阻止鼠标悬停部分触发


$（文档）.ready（函数（）{
$（'#con'）。悬停(
函数（）{//handlerIn
$（'#crossX'）。动画（{'width'：'115px'}，函数（）{
$（'#crossY'）。设置动画（{'height'：'115px'}）
})
},
函数（）{//handlerOut
$（'#crossY'）。动画（{'height'：'15px'}，函数（）{
$（'#crossX'）。设置动画（{'width'：'15px'}）
})
}
)
});
#con{
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：130px；
高度：130像素；
溢出：隐藏；
//背景色：黑色；
}
#一个{
宽度：100px；
高度：100px；
背景颜色：浅灰色；
颜色：黑色
}
#克罗斯{
位置：绝对位置；
顶部：15px；
左：0px；
宽度：15px；
高度：100px；
背景颜色：绿色；
颜色：黄色；
}
#易怒的{
位置：绝对位置；
顶部：0px；
左：15px；
宽度：100px；
高度：15px；
背景颜色：黄色；
颜色：白色；
}
#黑色的{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：100px；
高度：100px；
边框：15px纯黑；
z指数：10；
}
使用以下解决方案，可以保证“鼠标离开部件”仅在“鼠标进入部件”填满后运行（反之亦然）

此外，该脚本还考虑了以下情况：在快速用户操作中：“输入>离开>输入”状态保持不变，就好像用户没有完成“快速离开”一样因此，实际上这应该可以实现您想要实现的目标（至少我希望如此）


var mouseEnter=function（）{
//console.log（'in'）；
sPosition='in'；
如果（！mouseEnterIsDone | | |！mouseleaveistone）返回mouseEnterIsWaiting=true；
mouseEnterIsDone=false；
$（'#crossX'）。动画（{'width'：'115px'}，函数（）{
$.when（$（'crossY'）.animate（{'height'：'115px'}））。然后（function（）{sanitizeAnimation（'enter'）}）
})
},
mouseLeave=函数（）{
//console.log（'out'）；
sPosition='out'；
如果（！mouseEnterIsDone | | |！mouseleaveistone）返回mouseLeaveIsWaiting=true；
mouseleaveistone=false；
$（'#crossY'）。设置动画（{'height'：'15px'}，函数（）{
$.when（$（'#crossX'）.animate（{'width'：'15px'}））。然后（function（）{sanitizeAnimation（'leave'））
})
},
sanitizeAnimation=功能（sMode）{
如果（'enter'==sMode）
mouseEnterIsDone=true；
其他的
mouseleaveistone=true；
if（'in'==sPosition）{
如果（鼠标插入）{
mouseenterterswaiting=false；
mouseEnter（）；
}
}否则{
如果（鼠标正在等待）{
mouseLeaveIsWaiting=false；
mouseLeave（）；
}
}
},
mouseEnterIsDone=true，
mouseleaveistone=true，
mouseenterterswaiting=false，
mouseLeaveIsWaiting=false，
sPosition='out'；
$（文档）.ready（函数（）{
$（'con'）。悬停（mouseEnter，mouseLeave）；
});
正文{
填充：5%；
}
#骗局{
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：130px；
高度：130像素；
溢出：隐藏；
//背景色：黑色；
}
#一个{
宽度：100px；
高度：100px；
背景颜色：浅灰色；
颜色：黑色
}
#克罗斯{
位置：绝对位置；
顶部：15px；
左：0px；
宽度：15px；
高度：100px；
背景颜色：绿色；
颜色：黄色；
}
#易怒的{
位置：绝对位置；
顶部：0px；
左：15px；
宽度：100px；
高度：15px；
背景颜色：黄色；
颜色：白色；
}
#黑色的{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：100px；
高度：100px；
边框：15px纯黑；
z指数：10；
}


$（“#con”）.mouseenter（函数（）{
$（'body'）.addClass（'Hover'）；
$（'#crossX'）.stop（）.animate（{'width'：'115px'}，500，function（）{
$（'#crossY'）.stop（）.animate（{'height'：'115px'}，500）；
});
});
$（“body”）.mouseenter（函数（）{
$（'body'）.addClass（'Hover'）；
$（'#crossY'）.stop（）.animate（{'height'：'0px'}，500，function（）{
$（'#crossX'）.stop（）.animate（{'width'：'0px'}，500）；
});
});
#con{
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：130px；
高度：130像素；
溢出：隐藏；
//背景色：黑色；
}
#一个{
宽度：100px；
高度：100px；
背景颜色：浅灰色；
颜色：黑色
}
#克罗斯{
位置：绝对位置；
顶部：15px；
左：0px；
宽度：15px；
高度：100px；
背景颜色：绿色；
颜色：黄色；
}
#易怒的{
位置：绝对位置；
顶部：0px；
左：15px；
宽度：100px；
高度：15px；
背景颜色：黄色；
颜色：白色；
}
#黑色的{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：100px；
高度：100px；
边框：15px纯黑；
z指数：10；
}
身体{
背景色：#DCDC；
高度：500px；
}
Axel，感谢您的回复和解释。您的解决方案使动画更好地显示