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>

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

P.S。这可能非常明显，但我对JavaScript知之甚少。：L

Answer 1

我有一个简单的导航栏

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

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

Answer 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内的函数将在指定为第二个参数的延迟后执行。

Answer 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>

Answer 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>

Answer 5

你可以使用延迟（）。

<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>

Answer 6

非常有趣。什么都没有隐藏，直到你用鼠标移除。 FIDDLE

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

6 个答案: