0

当您将鼠标悬停在#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>
4

1 回答 1

1

尝试了几次，但我可以在 Firefox 中重新创建您的问题。
我认为这可能更接近您正在寻找的内容：

基本工作示例

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

.delay() 的 API 文档

基本版本将涵盖您所要求的内容，但您可能希望使用高级版本，因为它在触发悬停事件之前有延迟，这将解决快速移入和移出鼠标的问题#menu-big。

高级工作示例

$(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的改编，如果它适用于您，您可能还想对其进行投票。

于 2013-06-04T18:18:41.977 回答