Jquery .on ("mouseenter") - espere 2 segundos y luego realice la acción

Tengo un script que muestra el texto oculto cuando pasa el mouse sobre un div. Pero quiero que se demore 2 segundos, y si el usuario mueve el mouse antes de 2 segundos, no quiero que se muestre nada.Jquery .on ("mouseenter") - espere 2 segundos y luego realice la acción

¿Cómo puedo hacer esto?

Lo que tengo:http://jsfiddle.net/ZhrJT/

HTML:

<body> 
    <div>hover this</div> 
    <p class="hidden">unhidden!!</p> 
</body>

JS:

$("body").on("mouseenter", "div", function(){ 
    $("p").removeClass("hidden"); 
}).on("mouseleave", "div", function(){ 
    $("p").addClass("hidden"); 
});

CSS:

div { 
    background-color:red; 
    height:100px; 
} 

p.hidden { 
    display:none; 
} 

p { 
    background-color:yellow; 
    height:100px; 
}

Fuente

2012-01-26 supercoolville

http://cherne.net/brian/resources/jquery.hoverIntent.html podría ser lo que busca – PeeHaa

var timer; 
$("body").on("mouseenter", "div", function(){ 
    timer = setTimeout(function() { 
     $("p").removeClass("hidden"); 
    }, 2000); 
}).on("mouseleave", "div", function(){ 
    clearTimeout(timer); 
    $("p").addClass("hidden"); 
});

Hay ya go, es así de fácil. Simplemente configure un tiempo de espera que ocultará el elemento cuando se ejecute y cancele el tiempo de espera si el usuario mouseleave es el elemento.

Fuente

2012-01-26 20:51:38 Jasper

1 por golpear a mí –

gracias !!!!!!!! !!!!!!!!!!!!!!! – supercoolville

omg ustedes son rápidos ... buen trabajo ... el mío parecía idéntico :) –

Utilice setTimeout/clearTimeout. Algo como esto:

$("body").on("mouseenter", "div", function(){ 
    $(this).data('timeout', setTimeout(function(){ 
     $("p").removeClass("hidden"); 
    }, 2000)); 
}).on("mouseleave", "div", function(){ 
    clearTimeout($(this).data('timeout')); 
    $("p").addClass("hidden"); 
});

Fuente

2012-01-26 20:52:20

Jquery .on ("mouseenter") - espere 2 segundos y luego realice la acción

Respuesta

Cuestiones relacionadas