Question

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

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

      setTimeout(function(){

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

    }, 500);
});

Answer 1

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

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

    var banner = $(this);

    setTimeout(function() {

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

    }, 500);


});

http://jsfiddle.net/fkjn6/

Answer 2

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/

Answer 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;
});

Answer 4

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

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

Answer 5

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

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

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

Answer 6

试试这个：

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

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

因此您需要“保存”该引用，以便在 setTimeout（）调用中的函数中使用。

Answer 7

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

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

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

`

悬停设置超时不起作用

7 个答案: