jQuery setTimeout

Question

我想在此工具提示代码中添加超时，以便只显示鼠标是否在一段时间后悬停在它上面而不是立即...我尝试添加setTimeout()但我无法弄清楚使用clearTimeout()所以工具提示不会在mouseout上隐藏。你能帮忙吗？

// -----------------------------------------------
// 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();

Answer 1

当您使用动画时，可以使用.delay()来推迟工具提示的外观：

$(mcTooltip).text(mcHoverText).delay(1000).show('fast');

在mouseout功能中，使用.stop取消现有的延迟或动画，然后隐藏工具提示：

$(mcTooltip).stop(true).hide('fast');

Answer 2

var my_timer;
$('.mcTxb').hover(
    function () {
        my_timer = setTimeout(function () {
            //do work here
        }, 500);
    },
    function () {
        clearTimeout(my_timer);
    }
);

如果mouseover元素 ， 半秒钟。

Answer 3

一种选择是使用hoverIntent插件来完成您想要的任务。

Answer 4

1. 使用hover()代替，代码更少（而且总是很好，IMO）。

像这样：

function mcToolTip() {
    $(".mcTxb").hover(function(){
        // mouseover stuff here
        $("element").delay(3000).show(); // 3 second delay, then show
    }, function(){
        // mouseout stuff here
    });
}

Answer 5

这个问题很老，但我想我会为别人回答。超时不起作用的主要原因是“setTimeOut”。你不能骆驼驼背出来的部分。它的“setTimeout”。

Answer 6

setTimeout 在鼠标悬停或悬停时不起作用。使用.delay（）安全。

setTimeout(function(){
    $(mcTooltip).text(mcHoverText).show('fast');
}, 300);

// use this instead.

$(mcTooltip).text(mcHoverText).delay(3000).show('fast');