0

我有一个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

}
4

1 回答 1

5

你可以尝试类似...

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...This is an handler that binding the 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/

于 2013-11-13T17:45:21.017 回答