我如何將 1 秒延遲添加到隱藏 JavaScript function

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>

在此先感謝任何可以提供幫助的人

PS 這可能真的很明顯，但我對 JavaScript 知之甚少。:L

Answer 1

我有一個簡單的導航欄

那就不要使用 JavaScript。 這可以而且應該使用 CSS 來完成。CSS 轉換和選擇器允許准確定義您想要的內容。

另請參見延遲：CSS3 中的 Hover？ 以及那里的優秀例子。

Answer 2

不要使用巨大的 function 例如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中的 function 將在指定為第二個參數的延遲后執行。

Answer 3

你可以這樣做。 您使用delay()方法設置延遲，並在兩個 hover 函數上使用.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

很有意思。 沒有什么可以隱藏的，直到你鼠標移開。 小提琴