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

Одним из вариантов является использование hoverIntent плагина сделать то, что вы хотите.

Answer 3

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

Как так:

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

Answer 4

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

Это будет ждать полсекунды, прежде чем делать независимо когда вы mouseover элемент и независимо не произойдет, если вы mouseout в половине второго ,

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');