jQuery setTimeout [英] jQuery setTimeout
本文介绍了jQuery setTimeout的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在此工具提示代码中添加一个超时,以便仅在鼠标悬停一段时间而不是立即将鼠标悬停在其上时才显示...我试图添加setTimeout()
,但我不知道如何使用clearTimeout()
,因此工具提示不会在鼠标移开时隐藏.你能帮忙吗?
I'd like to add a timeout to this tooltip code so it only displays if the mouse hovers over it after a while rather than immediately... I tried adding the setTimeout()
but I could not figure out how to use the clearTimeout()
so the tooltip does not hide on mouseout. Can you help?
// -----------------------------------------------
// TOOLTIP MOUSE HOVER
// -----------------------------------------------
function mcTooltip() {
$('.mcTxb').mousemove(function(e) {
var mcHoverText = $(this).attr('alt');
var mcTooltip = $('.mcTooltip');
$(mcTooltip).text(mcHoverText).show('fast');
$(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10);
}).mouseout(function() {
var mcTooltip = $('.mcTooltip');
$(mcTooltip).hide('fast');
});
}
mcTooltip();
我尝试过:
// -----------------------------------------------
// TOOLTIP MOUSE HOVER
// -----------------------------------------------
function mcTooltip() {
$('.mcTxb').mousemove(function(e) {
var mcHoverText = $(this).attr('alt');
var mcTooltip = $('.mcTooltip');
setTimeOut(function(){
$(mcTooltip).text(mcHoverText).show('fast');
}, 300);
$(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10);
}).mouseout(function() {
var mcTooltip = $('.mcTooltip');
$(mcTooltip).hide('fast');
});
}
mcTooltip();
推荐答案
在使用动画时,可以使用 .delay()
推迟工具提示的外观:
As you're using animation, you can use .delay()
to defer the appearance of your tooltip:
$(mcTooltip).text(mcHoverText).delay(1000).show('fast');
在您的mouseout
函数中,使用 .stop
取消所有现有的延迟或动画,然后隐藏工具提示:
In your mouseout
function, use .stop
to cancel any existing delays or animations, and then hide the tooltip:
$(mcTooltip).stop(true).hide('fast');
这篇关于jQuery setTimeout的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文