我如何使用带有持续时间和缓动的 slideToggle()？

Question

我正在使用 jQuery 和反弹 jQuery UI 效果制作滑动菜单。问题是当我将鼠标悬停在第一个 li 元素上时，悬停事件甚至不会激活一次。这是我的 JavaScript 代码：

$(document).ready(function(){
    $("#topbar > ul > li:has(ul) > ul").hide().each(function(){
        var parent = $(this).parent();
        var height = parent.outerHeight();
        $(this).css({
            position: "absolute",
            top: height,
            zIndex: 1000
        });
    });
    $("#topbar > ul > li:has(ul)").hover(function(){
        $("ul", this).slideDown(500, "easeOutBounce");
    }, function(){
        $("ul", this).slideUp(500, "easeOutBounce");
    });
});

这是我的 HTML 代码：

<nav id="topbar">
    <ul>
        <li><a href=""><i class="fa fa-plus"></i>  New</a><ul><li>T</li><li>R</li></ul></li
        ><li><a href="">View</a></li>
    </ul>
</nav>

我一直在使用 jQuery 的 CDN (http://code.jquery.com/jquery.min.js) 提供的最新版本的 jQuery，并且我使用的是 jQuery 的 1.11.4 版本 UI.

编辑： 我还尝试了以下方法，而不是 .hover 方法：

$("#topbar > ul > li:has(ul)").on("mouseover mouseout", function(){
    $("ul", this).slideToggle(500, "easeOutBounce");
});

编辑： JSFiddle Here（旧的 JSFiddle 是错误的。）

Answer 1

您唯一真正的问题似乎是您尝试显示的 UL 的背景是透明的。

将如下所示的 class 添加到您的元素中：

<ul class="drop"><li>T</li><li>R</li></ul>

然后添加以下 CSS 规则：

.drop{
    background-color:#ccc;
}

正如 A.Wolf 指出的那样，将您的代码更改为以下内容会更好地提高性能，并使整体效果更加舒缓。

$(this).find("ul").stop().slideToggle(500, "easeOutBounce");

试试这个jsFiddle你会看到 ul 在悬停时显示和隐藏，动画现在更清晰了。

我如何使用带有持续时间和缓动的 slideToggle()？

How can I use slideToggle() with a duration and easing?

html

javascript

jquery

javascript-events