解决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();
            });
});

 

 

 

.