代码之家 › 专栏 › 技术社区 › DisgruntledGoat

延迟后淡出jquery菜单

settimeout delay hover menu jquery

DisgruntledGoat · 技术社区 · 15 年前

我正在开发一个jquery下拉菜单,当您悬停在顶级项目上时,该菜单将淡入。我想设置它,这样当你把鼠标移开时,菜单就不会立即消失。我有这个代码:

$(document).ready(function(){
  $('ul#menu > li').hover(
    // mouseover
    function(){
      $(this).find('>ul').fadeIn('fast');
    },
    // mouseout
    function(){
      setTimeout( function(){
        alert('fadeout');
        $(this).find('>ul').fadeOut('fast')
        }, 1000 );
    }  
  );
});

过了一会儿,警报就出现了,但菜单没有淡出。

2 回复 | 直到 15 年前

user120242 15 年前

window.setTimeout(),所以这是指window对象。

// mouseout
function(){
  var el=this;
  setTimeout( function(){
    alert('fadeout');
    $(el).find('>ul').fadeOut('fast')
    }, 1000 );
}

karim79 15 年前

看一看 hoverIntent . 它能让你更好地控制 mouseover / mouseout 按配置排列的事件:

var config = {    
     sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
     interval: 200, // number = milliseconds for onMouseOver polling interval    
     timeout: 500, // number = milliseconds delay before onMouseOut    
};

$(document).ready(function(){
  $('ul#menu > li').hoverIntent(
    // mouseover
    function(){
      $(this).find('>ul').fadeIn('fast');
    },
    // mouseout
    function(){
       $(this).find('>ul').fadeOut('fast');
    }  
  );
});

推荐文章

Gourav Srivastava · 我应该如何使用回调来获得期望的结果?

3 年前

Nikos Tzoun · addEventListener[重复]中带有参数“this”的SetTimeout调用函数

7 年前

Mer · 文本输入中的打字机效果在Firefox中不起作用

7 年前

Abido · setTimeout节点内存泄漏(Meteor)

7 年前

aman.s · 选中复选框5秒后刷新JavaScript页面

7 年前

Sanju · 如何在每次函数调用之前等待setTimeout?

7 年前

Casey Crookston · 在计时器上重复/循环ajax调用-即使超时

7 年前

Alperb · 如何在按键功能中设置超时功能

7 年前

DannyArcher · 我可以在设置间隔中插入多个设置超时吗?

7 年前

CraZyDroiD · 在reactjs中使用setTimeout连续更改状态

7 年前