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