我怎麼會延遲1秒添加到隱藏的JavaScript功能

這是一些JavaScript我有一個簡單的導航欄，但我有一個下拉消失的問題之前，你可以點擊它們，所以我想後添加延遲鼠標在隱藏之前離開酒吧。我怎麼會延遲1秒添加到隱藏的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

來源

2012-04-09 Novice Coder

的Java =的Javascript兩個完全不同的語言！;兩種截然不同的目的，環境和用途 – paulsm4 2012-04-09 17:51:00

jQuery http://api.jquery.com/delay/ – 2012-04-09 17:53:08

Javascript非常棒，功能強大，很高興你在學習它！祝你好運！ – murftown 2013-07-30 15:04:14

我認爲你可以做這樣的事情：

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

來源

2012-04-09 17:54:09 MilkyWayJoe

'.removeClass（）'在這裏不會正確，因爲'this'將是嵌套的'ul'，而不是它在OP代碼中的'li'。另外，我認爲你必須妥善處理鼠標熄滅然後在延遲期間重新進入的情況。 – jfriend00 2012-04-09 18:02:19

這是真的..給你投票 – MilkyWayJoe 2012-04-09 19:40:42

不要用一個巨大的功能，如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內部功能將指定爲第二個參數的延遲之後執行。

來源

2012-04-09 17:58:50

delay（）並不是一個真正的巨大功能。它將你的匿名函數彈出到隊列棧中，通過setTimeout（）調用它，並返回一個jQuery對象。你沒有看到任何類型的性能影響，因爲顯然你不會在循環中延遲運行。 – Jordan 2012-04-09 18:35:05

你可以這樣做。您可以使用delay()方法設置延遲，並在兩種懸停功能上使用.stop(true)，以防用戶在延遲期間外出並返回。 .stop(true)將清除任何排隊的動畫。我也將代碼切換到fadeIn()和，因爲那些會根據需要自動執行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>

來源

2012-04-09 18:00:49 jfriend00

您可以使用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>

來源

2012-04-09 18:04:31

我有一個簡單的導航欄

不要使用JavaScript即可。這可以並且應該用CSS完成。 CSS轉換和選擇器允許準確定義你想要的。

又見Delay :Hover in CSS3?和excellent example從那裏。

來源

2012-04-09 18:14:14 Bergi

然後告訴我們如何去做。 – 2012-04-10 07:57:54

好的，添加鏈接。我不想重複它:) – Bergi 2012-04-10 13:54:14

非常有趣。沒有任何東西可以隱藏，直到你彈出。 FIDDLE

來源

2012-04-09 22:49:52

我怎麼會延遲1秒添加到隱藏的JavaScript功能

回答

相關問題