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屋！