jQuery setTimeout

Question

Me gustaría agregar un tiempo de espera a este código de información sobre herramientas para que solo se muestre si el mouse pasa sobre él después de un tiempo en lugar de inmediatamente ... Intenté agregar el setTimeout() pero no pude entender cómo usarlo el clearTimeout() por lo que la información sobre herramientas no se oculta en mouseout. ¿Puede usted ayudar?

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

yo probamos este:

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

usted está utilizando la animación, puede utilizar .delay() aplazar la apariencia de su información sobre herramientas:

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

En su función mouseout, utilice .stop para cancelar cualquier retraso o animaciones existentes, y luego ocultar la información sobre herramientas :

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

Answer 2

Una opción es usar el plugin hoverIntent para lograr lo que desea.

Answer 3

1. uso hover() cambio, es menos código (y eso siempre es bueno, OMI).

así:

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

Esto hará esperar medio segundo antes de hacer lo cuando mouseover el elemento y el lo no sucederá si mouseout en el medio segundo .

Answer 5

Esta pregunta es antigua, pero pensé que la respondería por otras. La razón principal por la que el tiempo de espera no funcionaba era el caso de "setTimeOut". No puedes camello jorobando la parte de afuera. Su "setTimeout".

Answer 6

setTimeout está no funciona en mouseover o estacionario. Es seguro usar .delay().

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

// use this instead. 

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