解决slideDown()和slideUp()反复执行的问题

【前言】

      二级下滑菜单经常出现的一个问题:当鼠标在菜单上快速滑动时,会如下所示,同时有多个子菜单在不停的显示、隐藏。

解决slideDown()和slideUp()反复执行的问题

【主体】

(1)初始代码:

jQuery(document).ready(function($) {
            $(".main>li").hover(function() {
                $(this).children("ul").slideToggle(400);
            });                                                     
        });

 

(2)解决方案

         这里我给出两种解决方方案:

         ①使用stop()方法来停止重复动画

jQuery(document).ready(function($) {
            $(".main>li").hover(function() {
                $(this).children("ul").slideDown();
            }, function() {
                $(this).children("ul").stop(true,false).slideUp();
            });                                             
 });

         ②使用toggle()方法替代

jQuery(document).ready(function($) {
            $(".main>li").hover(function() {
                $(this).children("ul").toggle();
            });
});

 

 

 

.