用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示。

时间:2022-05-22 20:34:10
用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示。
原因:在为一个元素绑定hover事件之后,用户把光标移入元素时会触发动画效果,而当这个动画效果还没结束时,用户就将光标移除这个元素了,那么光标移除胡动画效果将会被放进队列之中,等待光标移入的动画结束后再执行。因此如果光标移入移除得过快就会导致动画效果与光标的动作不一致。
方法一:用stop()
$(function () {
    $(".ListFirst").hover(
        function () {
            $(this).children("ul").stop(true,true).slideDown(200);
        }, function () {
            $(this).children("ul").stop(true, true).slideUp(100);
        }
    );
});