悬停设置超时不起作用

时间:2011-12-12 19:31:54

标签: javascript jquery

如果用户将我的横幅悬停500毫秒,我想display:none,但以下JQuery代码无效。错误在哪里?

$('.banner').hover(function() {

      setTimeout(function(){

      $(this).css('display','none');

    }, 500);
}); 

7 个答案:

答案 0 :(得分:6)

你不能在匿名函数中传递$(this)。将其设置为变量

$('.banner').hover(function() {

    var banner = $(this);

    setTimeout(function() {

        banner.css('display', 'none');

    }, 500);


});

http://jsfiddle.net/fkjn6/

答案 1 :(得分:4)

this内的setTimeout未引用this函数中的hover。您可以在this函数中缓存hover,以便可以在setTimeout函数中使用它:

$('.banner').hover(function() {

      var $this = $(this);

      setTimeout(function(){

          $this.css('display','none');

    }, 500);
});

以下是演示:http://jsfiddle.net/hVejj/

<强>更新

var timer;
$('.banner').hover(function() {

      var $this = $(this);

      timer = setTimeout(function(){

          $this.css('display','none');

    }, 500);
},
function () {
    clearTimeout(timer);
});

以下是此次更新的演示:http://jsfiddle.net/hVejj/1/

答案 2 :(得分:3)

如果您希望它在悬停在其上500ms时隐藏横幅,则需要保存对隐藏的DOM元素的引用。如果您在超时触发之前已停止悬停,则可能还需要清除计时器。您需要单独使用输入和输出处理程序的签名。存放计时器手柄并在停止悬停时将其清除(如果尚未过期)。

var hoverTimer = null;
$('.banner').hover(function() { 
   var $banner = $(this);
   hoverTimer = setTimeout(function(){
                     hoverTimer = null;
                     $banner.css('display','none');
                }, 500); 
}, function() {
   if (hoverTimer) {
      clearTimeout(hoverTimer);
   }
   hoverTimer = null;
});

答案 3 :(得分:2)

您需要为回调函数提供对this变量的访问权限:

$('.banner').hover(function() {
      var temp = this;
      setTimeout(function(){
      temp.css('display','none');
    }, 500);
}); 

答案 4 :(得分:2)

以下代码将在用户悬停超过500毫秒后隐藏横幅:

var timeout;
$('.banner').hover(
    var banner = $(this);

    // Hover In
    function() {
        timeout = setTimeout(function() { banner.hide(); }, 500);
    },
    // Hover Out
    function() {
        clearTimeout(timeout);
    }
);

答案 5 :(得分:1)

试试这个:

$('.banner').hover(function() {
  var me = $(this);
  setTimeout(function(){
    me.css('display','none');
  }, 500);
});

变量根据范围更改含义。进入 setTimeout()中的函数后,调用不再引用 .banner 元素。

因此您需要“保存”该引用,以便在 setTimeout()调用中的函数中使用。

答案 6 :(得分:1)

如果你正在尝试按照我的想法行事,那么这样的事情应该会有效:

var tmp_abort
$('.banner').mouseenter(function() {
    tmp_abort=setTimeout(function(){
        $(this).css('display','none');
    }, 500);
});   

$('.banner').mouseleave(function(){
    clearTimeout(tmp_abort)
});

`