javascript - Jquery Slidein 滑出悬停效果问题

Question

我想要带有滑入和滑出效果的下拉菜单。它有效，但是当我悬停两次三次时，它会继续滑入和滑出取决于我悬停的次数。

    <div class="tp-menu">
<ul class="menu nav navbar-nav">
    <li class="" style=""><a  class="dropdown-toggle" href="index1.html">Demo 1 </a>
        <ul class="dropdown-menu" style="display: none;">
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 1">Sub demo1</a></li>
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 2">Sub demo2</a></li>
        </ul>
    </li>
    <li class="" style=""><a  class="dropdown-toggle" href="index1.html">Demo 2 </a>
        <ul class="dropdown-menu" style="display: none;">
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 1">Sub demo1</a></li>
            <li class="submenu-title"></li><li class=""><a class="" href="sub demo 2">Sub demo2</a></li>
        </ul>
    </li>
</ul></div>

和jquery

 $("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
        $(this).children("ul.dropdown-menu").slideDown('fast');
        //alert(1);
    }, function () {
        $(this).children("ul.dropdown-menu").slideUp('slow');
    });

你可以在这里看到现场演示:http://jsfiddle.net/twb4spps/

我需要它，如果我快速悬停两次三次但它显示一次子菜单。

Answer 1

您需要停止动画并清除动画队列。您可以通过在 hoverOut 上应用 .stop(true) 来做到这一点。

.stop() //stops the nimation
.stop(true) //stops the animation and clears the queue 

代码:

(function ($) { 
$("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
        $(this).children("ul.dropdown-menu").slideDown('fast');
        //alert(1);
    }, function () {
        $(this).children("ul.dropdown-menu").stop(true).slideUp('slow');
    });
}(jQuery));

JSFIDDLE