web-dev-qa-db-fra.com

Si vous passez la souris pendant plus de 2 secondes, alors montrez que non?

Voici une fonction de diapositive jQuery que j'ai appliquée à un survol div pour faire glisser un bouton vers le bas.

Cela fonctionne bien, sauf que maintenant, chaque fois que quelqu'un entre et sort de celui-ci, il continue de bouger de haut en bas.

J'ai pensé que si je mettais un retardateur d'une ou deux secondes, cela aurait plus de sens.

Comment modifier la fonction pour exécuter la diapositive uniquement si l'utilisateur est sur le div pendant plus d'une seconde ou deux?

<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>
jqueryhtmlcsstimerslidedown
27
user1266515

Vous devez définir une minuterie au survol de la souris et l'effacer lorsque la diapositive est activée ou au survol de la souris, selon la première éventualité:

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

Voyez-le en action.

60
Jon
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);
});
4
xdazz