jQuery setTimeout

Question

Chciałbym dodać limit czasu do tego kodu podpowiedzi tak, aby wyświetlał się tylko wtedy, gdy mysz najedzie na niego po chwili, a nie natychmiast ... Próbowałem dodać setTimeout(), ale nie mogłem wymyślić, jak używać clearTimeout(), więc etykieta narzędzia nie ukrywa się przy wysunięciu myszy. Możesz pomóc?

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

Próbowałem to:

// ----------------------------------------------- 
// 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

Jak używasz animacji, można użyć .delay() odroczenie wygląd podpowiedzi:

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

W funkcji mouseout użyć .stop aby anulować istniejące opóźnienia lub animacji, a następnie ukryć podpowiedź :

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

Answer 2

Jedną z opcji jest użycie wtyczki hoverIntent aby osiągnąć to, co chcesz.

Answer 3

1. Zastosowanie hover() zamiast, to mniej kodu (i to zawsze dobre, IMO).

tak:

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

To będzie czekać pół sekundy przed wykonaniem niezależnie kiedy mouseover element i cokolwiek się nie stanie, jeśli mouseout w pół sekundy .

Answer 5

To pytanie jest stare, ale myślałem, że odpowiadam na nie dla innych. Głównym powodem, dla którego limit czasu nie działał, był przypadek "setTimeOut". Nie można wielbłąda garbić części Out. Jego "setTimeout".

Answer 6

setTimeout nie działa po najechaniu myszką lub najechaniu myszą. Jest bezpieczny w użyciu .delay().

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

// use this instead. 

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