jQuery mouseover/mouseout触发过快导致slide滑动效果执行异常问题

问题根源 #

• 事件类型选择不当：mouseover/mouseout支持事件冒泡，鼠标移动到子元素.titre上时会重复触发父元素的出入事件，导致逻辑混乱
• 动画队列堆积：短时间内多次触发事件时，前序动画未执行完就加入新动画，会出现状态不同步的情况，快速移开鼠标时就会出现黄色框无法隐藏的问题

修复方案 #

将原有JS事件监听逻辑替换为以下代码即可：

$('.item_menu').mouseenter(function() {
  $(this).children('.titre').stop(true, true).show('slide', {
    direction: 'right'
  });
});

$('.item_menu').mouseleave(function() {
  $(this).children('.titre').stop(true, true).hide('slide', {
    direction: 'right'
  });
});

改动说明 #

1. 把mouseover替换为mouseenter、mouseout替换为mouseleave，这两个事件仅在鼠标真正进入/离开绑定的.item_menu元素本身时触发，不会被子元素的鼠标事件干扰
2. 新增stop(true, true)调用：第一个参数true表示清空当前元素的所有待执行动画队列，第二个参数true表示立即完成当前正在执行的动画，避免动画叠加导致的状态异常

其他CSS和HTML代码无需调整，修改后无论鼠标移动速度快慢，黄色提示框都能正常滑入滑出。

内容的提问来源于stack exchange，提问作者Ju De