javascript - 如何为隐藏 JavaScript 函数添加 1 秒延迟

Question

这是我用于简单导航栏的一些 JavaScript，但我遇到了下拉菜单在单击它们之前消失的问题，因此我想在鼠标离开导航栏后在它们隐藏之前添加延迟。

我该怎么做？

<script type="text/javascript">
    $(document).ready(function () {
        // Navigation bar drop-down
        $("nav ul li").hover(function () {
            $(this).addClass("active");
            $(this).find("ul").show().animate({ opacity: 1 }, 400);
        }, function () {
            // Delay on hiding should go here
            $(this).find("ul").hide().animate({ opacity: 0 }, 200);
            $(this).removeClass("active");
        });
        $('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
        $('nav ul li:first-child').addClass('first');
        $('nav ul li:last-child').addClass('last');
        $('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
    });
</script>

提前感谢任何可以提供帮助的人

附注这可能很明显，但我对 JavaScript 知之甚少。 :L

Answer 1

I have a simple navigation bar

那就不要使用 JavaScript。这可以而且应该用 CSS 来完成。 CSS 转换和选择器允许准确定义您想要的内容。

另请参阅Delay :Hover in CSS3?和 excellent example从那里开始。