许多鼠标悬停事件时,jQuery停止排队动画

时间:2012-05-02 20:35:18

标签: jquery html menu drop-down-menu

E.g。下拉菜单如果你渲染它并快速鼠标悬停在“关于我们”按钮上并且像5次一样,并停止菜单打开几次然后停止。我需要它来做最后一个动画。

<script type="text/javascript">
    $(document).ready(function(){
        $("ul.topnav li a").mouseenter(function() {
            $(this).parent().find("ul.subnav").slideDown('fast').show();
        });  


        $(".dropdown").mouseleave(function(){ 
            $(this).stop(true, false);
            $(this).parent().find("ul.subnav").slideUp('fast');
        });
    });

HTML:

<ul class="topnav">  
    <li><a href="#">Home</a></li>  
    <li class="dropdown">  
        <a href="#">About Us</a>  
        <ul class="subnav dropdown">  
            <li><a href="#">Sub Nav Link 1</a></li>  
            <li><a href="#">Sub Nav Link 2</a></li>  
        </ul>
    </li>  
</ul>
</script>

1 个答案:

答案 0 :(得分:5)

使用.stop(true, true)作为转换的前缀,例如:

$(this).parent().find("ul.subnav").stop(true, true).slideDown('fast').show();