jQuery中的slideUp和slideDown动画快速划过引起滞后反复执行的问题

之前在用jQuery的slideDown和 slideUp 两方法做下拉导航菜单的时候,发现用鼠标快速地连续划过的时候,动画效果会滞后,而且反复执 看起来相当不爽,不美观, 但是这2个方法我们使用的几率还是很高的, 却一直存在这么一个小问题。如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画是会滞后的反复执行的,那么该如何去处理呢?

其实也很简单,我们只需在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题. 例如: 当鼠标滑过导航后 0.2 秒, 下拉菜单才会展开, 如果鼠标离开导航时, 展开的处理将被终止. 也就是说, 想要展开下拉菜单鼠标必须有 0.2 秒的事件停留在导航上, 那么迅速地划过导航是无法执行展开事件的. 收起也是如此

注意: 当鼠标悬停时间小于动画时间时, 同样可能出现反复执行现象, 可以考虑将悬停时间设置比动画时间稍长

改进后如下列子所示: