jQuery setTimeout

Question

Я бы хотел добавить тайм-аут в этот код всплывающей подсказки, чтобы он отображался только в том случае, если мышь наведена на него через некоторое время, а не сразу ... Я попытался добавить setTimeout(), но не мог понять, как его использовать clearTimeout(), поэтому подсказка не скрывается при наведении мыши. Вы можете помочь?

// -----------------------------------------------
// 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 элемент и что бы то ни было не произойдет, если вы mouseout в течение полсекунды.

Answer 3

Один из вариантов - использовать плагин hoverIntent для достижения желаемого.

Answer 4

Этот вопрос старый, но я подумал, что отвечу на него другим. Основной причиной, по которой тайм-аут не работал, был случай "setTimeOut". Вы не можете верблюд горбить часть Out. Его "setTimeout".

Answer 5

1. Вместо этого используйте hover(), кода меньше (и это всегда хорошо, ИМО).

Примерно так:

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

Answer 6

setTimeout не работает при наведении курсора или наведении курсора.Безопасно использовать .delay ().

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

// use this instead.

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