event - mouseover jquery

Si se pasa el mouse por más de 2 segundos, entonces mostrar que no lo hacen?

Question

Aquí hay una función de deslizamiento jQuery que he aplicado a un div al pasar el cursor para deslizar un botón hacia abajo.

Funciona bien, excepto que ahora cada vez que alguien entra y sale de él, sigue subiendo y bajando.

Pensé que si le ponía un temporizador de retardo de uno o dos segundos tendría más sentido.

¿Cómo modificaría la función para ejecutar la diapositiva hacia abajo solo si el usuario está en la div durante más de un segundo o dos?

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js "></script>
<script type="text/javascript">
$("#NewsStrip").hover(
function () {
$("#SeeAllEvents").slideDown(''slow''); },
function () {
$("#SeeAllEvents").slideUp(''slow'');
});
</script>

Answer 1

Debe configurar un temporizador en mouseover y borrarlo cuando la diapositiva está activada o en mouseout, lo que ocurra primero:

var timeoutId;
$("#NewsStrip").hover(function() {
if (!timeoutId) {
timeoutId = window.setTimeout(function() {
timeoutId = null; // EDIT: added this line
$("#SeeAllEvents").slideDown(''slow'');
}, 2000);
}
},
function () {
if (timeoutId) {
window.clearTimeout(timeoutId);
timeoutId = null;
}
else {
$("#SeeAllEvents").slideUp(''slow'');
}
});

Véalo en acción.

Answer 2

var time_id;
$("#NewsStrip").hover(
function () {
if (time_id) {
clearTimeout(time_id);
}
time_id = setTimeout(function () {
$("#SeeAllEvents").stop(true, true).slideDown(''slow'');
}, 2000);
}, function () {
if (time_id) {
clearTimeout(time_id);
}
time_id = setTimeout(function () {
$("#SeeAllEvents").stop(true, true).slideUp(''slow'');
}, 2000);
});