如何向隐藏 JavaScript 函数添加 1 秒延迟答案

【问题标题】：How would I add a 1 second delay to the hide JavaScript function如何向隐藏 JavaScript 函数添加 1 秒延迟
【发布时间】：2012-04-22 01:44:01
【问题描述】：

这是我为一个简单的导航栏准备的一些 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

【问题讨论】：

Java != Javascript 两种完全不同的语言；两种截然不同的用途、环境和用途
jQuery api.jquery.com/delay
Javascript 很棒而且功能强大，很高兴你正在学习它！祝你好运！

标签： javascript jquery function hide delay

【解决方案1】：

我有一个简单的导航栏

那么不要使用 JavaScript。这可以而且应该使用 CSS 来完成。 CSS 过渡和选择器允许准确定义您想要的。

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

【讨论】：

好的，已添加链接。我不想重复它:)

【解决方案2】：

不要使用像delay() 这样的大函数。只需使用setTimeout()。

var that = this
setTimeout(function() {
    $(that).hide() // Do your stuff, just don't forget that "this" has changed
}, 1000) // Define your delay in milliseconds here

setTimeout 中的函数将在指定为第二个参数的延迟之后执行。

【讨论】：

delay() 并不是一个很大的函数。它将您的匿名函数弹出到队列堆栈中，通过 setTimeout() 调用它，并返回一个 jQuery 对象。您没有看到任何形式的性能损失，因为显然您无论如何都不会在循环中运行延迟。

【解决方案3】：

你可以这样做。您使用delay() 方法设置延迟，并在两个悬停功能上使用.stop(true)，以防用户在延迟期间出去和回来。 .stop(true) 将清除所有排队的动画。我还将代码切换为fadeIn() 和fadeOut()，因为它们会根据需要自动执行show() 和hide()。

<script type="text/javascript">
    $(document).ready(function () {
        // Navigation bar drop-down
        $("nav ul li").hover(function () {
            $(this).addClass("active");
            $(this).find("ul").stop(true).fadeIn(400);
        }, function () {
            // Delay on hiding should go here
            var self = $(this);
            self.find("ul").stop(true).delay(1500).fadeOut(400, function() {
                self.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>

【讨论】：

【解决方案4】：

我认为你可以这样做：

<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().delay(1000).animate({ opacity: 0 }, 200, function() {
                $(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>

【讨论】：

.removeClass() 不会在此处正确显示，因为 this 将是嵌套的 ul，而不是它在 OP 代码中的 li。另外，我认为你必须妥善处理鼠标在延迟期间熄灭然后又回来的情况。

【解决方案5】：

你可以使用 delay()。

<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").delay(5000).fadeOut();
            $(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>

【讨论】：

【解决方案6】：

非常有趣。没有任何东西可以隐藏，直到您将鼠标悬停。 FIDDLE

【讨论】：