Javascript 如何将slideToggle（）与持续时间和时间配合使用？

我正在使用jQuery和bounce 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>

---

编辑：（旧的JSFIDLE是错误的。）

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

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

T
R

然后添加以下CSS规则：

.drop{
    background-color:#ccc;
}

正如A.Wolf所指出的，将代码更改为下面的代码将有助于提高性能，并使整个效果有点舒缓

$（this.find（“ul”）.stop（）.slideToggle（500，“easeOutBounce”）

尝试此操作，您将看到ul在悬停时显示和隐藏，动画现在更清晰。
我建议您不要使用悬停，而是使用mouseenter mouseleave。悬停在jQuery中不再是有效的事件。这里有更多：您可以创建JSFIDLE吗link@Mikey仍然有效的函数不再有效，这可能是您的想法of@balachandar当然，更新了。@Mikey，正如您在更新中看到的，我还尝试了
mouseover
和
mouseout
方法。@JacquesMarais，非常欢迎您，您可能还应该将悬停元素的高度/宽度调整为容器大小的100%。我注意到它现在有点挑剔，因为那个区域很小，很开心coding@DelightedD0D您不需要传递任何空回调，这是完全有效的：
.slideToggle（500，“easeOutBounce”）@A.Wolff谢谢，看着我看你是对的。这根本不是我理解这些文件的意义的方式，这些文件是我的坏的、不好的更新。作为旁注，它应该是：
$（this.find（“ul”）.stop（）.slideToggle（500，“easeOutBounce”）更具可读性、更高性能（如果我们关心几毫秒）和更好的行为：）@JacquesMarais请查看AWolfs评论和我的更新，我以前错了：）
.drop{
    background-color:#ccc;
}