jquery - 如何以较小的延迟淡化菜单？

Question

当您将鼠标悬停在#menu 上时，它会淡入#menu-big。我想在用户将鼠标移离 #menu-big 时添加延迟。

到目前为止，我的工作很有趣(第一次工作正常，然后就不能正常工作):http://jsbin.com/upopap/1

有什么想法吗？

jQuery

$(document).ready(function() {

  $('#menu').hover(
    // mouseover
    function(){
      $('#menu-big').fadeIn('fast');
    },
    // mouseout
    function(){
      setTimeout( function(){
        $('#menu-big').fadeOut('fast')
        }, 1000 );
    }
  );


});

HTML

  <div id="menu">
    <div id="menu-big">
      <ul>
        <li><a href=""><span>Meet our Staff</span></a></li>
        <li><a href=""><span>Services</span></a></li>
        <li><a href=""><span>Associations</span></a></li>
      </ul>
    </div>
  </div>

Answer 1

尝试了几次，但我可以在 Firefox 中重现您的问题。
我认为这可能更接近您要查找的内容:

Basic Working Example

$(document).ready(function () {
    $('#menu').mouseenter(function () {
        $('#menu-big').fadeIn(400);
    });
    $('#menu').mouseleave(function () {
        $('#menu-big').delay(800).fadeOut(400);
    });
});

API documentaion for .delay()

基本版本将涵盖您的要求，但您可能想要使用高级版本，因为它在触发悬停事件之前有延迟，这将解决将鼠标移入和移出 #菜单很大很快。

Advanced Working Example

$(function() {
    var timeoutId;
    $("#menu").hover(function() {
        if (!timeoutId) {
            timeoutId = window.setTimeout(function() {
                timeoutId = null;
                $("#menu-big").fadeIn('slow');
           }, 1000);
        }
    },
    function () {
        if (timeoutId) {
            window.clearTimeout(timeoutId);
            timeoutId = null;
        }
        else {
           $("#menu-big").delay(800).fadeOut('slow');
        }
    });
});

此方法改编自 This Answer如果它对你有用，你可能也想通过它进行投票。