我怎么会延迟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

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

'.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内部功能将指定为第二个参数的延迟之后执行。

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>

答

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

答

我有一个简单的导航栏

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

又见Delay :Hover in CSS3?和excellent example从那里。

然后告诉我们如何去做。 – 2012-04-10 07:57:54

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

答

非常有趣。没有任何东西可以隐藏，直到你弹出。 FIDDLE

我怎么会延迟1秒添加到隐藏的JavaScript功能

相关推荐