悬停设置超时不起作用

我想display:none如果用户将我的标题悬停了500毫秒，但以下JQuery代码不起作用。错误在哪里？悬停设置超时不起作用

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

     setTimeout(function(){ 

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

    }, 500); 
});

来源

2011-12-12 user198989

*我想显示：无。如果用户有500毫秒悬停它*那是什么意思？悬停*为* 500毫秒？在任何情况下，回调中的'this'都指向'window'。 –

你是什么意思“不工作？“ – tvanfosson

的this里面你setTimeout不指this在hover功能。您可以在hover功能缓存this，以便它可以在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/

来源

2011-12-12 19:36:31 Jasper

谢谢贾斯珀，这工作。但实际上，我想要做的是，如果用户悬停在500毫秒的横幅。没有火过后快速悬停和鼠标。 – user198989

@ user198989检查我的更新，它应该做的伎俩你想要的功能称为'hoverIntent'，并且有一个插件，但是我的更新是基本想法。 – Jasper

完美。谢谢。 – user198989

您不能像匿名函数那样通过$(this)。将它设置为一个变量，而不是

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

    var banner = $(this); 

    setTimeout(function() { 

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

    }, 500); 


});

http://jsfiddle.net/fkjn6/

来源

2011-12-12 19:35:51

你需要给回调函数访问权this变量：如果你想让它

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

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

来源

2011-12-12 19:37:27 Thor84no

用户将鼠标悬停时间超过500毫秒后，下面的代码会隐藏广告当你将它悬停超过500毫秒时隐藏横幅，那么你需要保存对被隐藏的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; 
});

来源

2011-12-12 19:37:34

：

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

来源

2011-12-12 19:38:51 tvanfosson

试试这个：

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

的这个变量而改变含义基于范围。一旦进入函数setTimeout（）调用这个不再是指.banner元素。

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

来源

2011-12-12 19:38:57 jason

如果你想要做什么，我想，这样的事情应该使其工作：

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

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

来源

2011-12-12 19:47:05

你不必选择'.banner'两次，你可以链接调用：$（'。banner'）。mouseenter（）。mouseleave（）;'。欢迎使用stackoverflow！ – Jasper

悬停设置超时不起作用

回答

相关问题