下拉菜单动画重叠，当鼠标快速从几个<li>之间来回移动时，下拉菜单动画就重叠，用了stop()但是还是动画重叠，有图有代码，请高手改下代码，消除重叠，多谢

下拉菜单动画重叠，当鼠标快速从几个<li>之间来回移动时，下拉菜单动画就重叠，用了stop()但是还是动画重叠，有图有代码，请高手改下代码，消除重叠，谢谢！
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head><title></title>
<style type="text/css">
    * { margin: 0; padding: 0; }
    li { background-color:#b6ff00; float: left; width: 100px; height: 33px; margin-right: 8px; list-style:none;}
    .itempanel {display:none; position: absolute; top:37px; width: 300px; height: 200px;border:solid 1px #0094ff }
</style>
        <script src="Scripts/jquery-2.0.3.min.js"></script>
        <script>
            $( function () {

                $( ".menu >li" ).hover( function () {
                    $( this ).siblings().children( 'div' ).stop();
                    $( this ).children( 'div' ).slideDown( 300 )
                } );
                $( '.menu>li' ).mouseleave( function () { $( this ).find( ".itempanel" ).slideUp( 0 ) } );
            } );
        </script>

</head>
   <body>
            <ul class="menu">
            <li ><a href="#none"></a><div class="itempanel"></div></li>
            <li ><a href="#none"></a><div class="itempanel"></div></li>
             <li ><a href="#none"></a><div class="itempanel"></div></li>
             <li ><a href="#none"></a><div class="itempanel"></div></li>
             <li ><a href="#none"></a><div class="itempanel"></div></li>
         </ul>
   </body>
</html>
------解决方案--------------------
有2中方法。
1.设置hover延时。就是hover了0.几秒才弹出菜单。网上有hover延时插件。主要是setTimeout和clearTimeOut。再把握好this的传入。
2.菜单收回时不要用动画，直接消失。这种最方便。
------解决方案--------------------



 $( this ).siblings().children( 'div' ).stop();

改为



 $( this ).siblings().children( 'div' ).hide();

试试呢
------解决方案--------------------
睡前大致看了下,首先你的css写的有些乱,多看下规范或者随便找找前端面试题看看css的书写顺序就好,尽量写的严谨写吧,不然容易出bug. js既然你已经用了hover感觉没必要写mouseleave了吧,hover方法可以传两个函数的,已经包括移出效果了.你这么写还要遍历两遍DOM多亏啊...另外可能代码习惯不一样,我平常很少用slide,一般都是用animate写,感觉比较有安全感...当然也可以用插件,比如TweenMax,可以不用考虑那么多兼容性. 所以我建议你换animate重新试试,找出bug的根本原因.另外可以多看看TweenMax的API :)

下拉菜单动画重叠，当鼠标快速从几个之间来回移动时，下拉菜单动画就重叠，用了stop()但是还是动画重叠，有图有代码，请高手改下代码，消除重叠，多谢

相关推荐

下拉菜单动画重叠，当鼠标快速从几个
之间来回移动时，下拉菜单动画就重叠，用了stop()但是还是动画重叠，有图有代码，请高手改下代码，消除重叠，多谢