如果用户将我的横幅悬停500毫秒,我想display:none
,但以下JQuery代码无效。错误在哪里?
$('.banner').hover(function() {
setTimeout(function(){
$(this).css('display','none');
}, 500);
});
答案 0 :(得分:6)
你不能在匿名函数中传递$(this)
。将其设置为变量
$('.banner').hover(function() {
var banner = $(this);
setTimeout(function() {
banner.css('display', 'none');
}, 500);
});
答案 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)
});
`