检测元素是否未悬停5秒钟

Question

我有一个hover事件,删除一个小按钮,并在它悬停时用一个完整的菜单栏替换它.

我想做的是,如果鼠标没有悬停在菜单栏(this.element)上5秒钟(每次hover事件发生时计时器重置),则会发生相反的情况.

this.button.on('hover', function(e){

    t.admin_bar.show('slide', { 'direction': t.options.position }, 500);
    t.button.hide('slide', { 'direction': t.options.position }, 500);

});

---

更新

在迄今为止提供的评论和答案的帮助下,我想出了这个.但是,即使mouseenter和mouseleave事件正在运行,clearTimout()似乎也不是因为管理栏仍然被隐藏.

_create_events : function(){

    var t = this;   // This object

    t.admin_bar = t.element

    /** Capture when the mouse is hovered over the 'Show admin bar' button */
    t.button.on('hover', function(e){

        t._show_admin_bar();
        t._set_timeout();   // Start a new timeout (to hide the admin bar if it's not hovered on)

    });

    /** Capture when the mouse is hovered over the admin bar */
    t.admin_bar.on('mouseenter', function(e){

        clearTimeout(t.timer);  // Clear the existing timeout

    });

    /** Capture when the mouse leaves the admin bar */
    t.admin_bar.on('mouseleave', function(e){

        t._set_timeout();   // Restart the timout

    });

}, // _create_events

_set_timeout : function(){

    var t = this;   // This object

    t.timer = setTimeout(function(){
        t._hide_admin_bar();
    }, 5000);

}, // _timeout

_show_admin_bar : function(){

    this.admin_bar.show('slide', { 'direction': this.options.position }, 500);  // Show the admin bar
    this.button.hide('slide', { 'direction': this.options.position }, 500);     // Hide the 'Show admin bar' button

}, // _show_bar

_hide_admin_bar : function(){

    this.admin_bar.hide('slide', { 'direction': this.options.position }, 500);  // Hide the admin bar
    this.button.show('slide', { 'direction': this.options.position }, 500);     // Show the 'Show admin bar' button

}

Answer 1

你可以试试像......

var timer;
function hide(){
    //Hide your menu bar
}
function show(){
    //Show your menu bar
}

$("#buttonID").hover(
  function() {
    clearTimeout(timer);
    show();
  }, function() {
    timer = setTimeout(function(){hide()},5000);
  }
);

更新:

问题在于你调用.on("hover" function...这是一个绑定mouseenter和mouse leave的处理程序,在我看来令人困惑.我更喜欢使用mouseenter或hover()函数.所以我把你的代码更改为

t.button.on('mouseenter', function (e) {
    t._show_admin_bar();
    t._set_timeout(); // Start a new timeout (to hide the admin bar if it's not hovered on)
 });

http://jsfiddle.net/KdStd/1/