Retarder l'événement de vol stationnaire?

Question

Je voudrais retarder un événement de survol dans jQuery. Je lis un fichier lorsque l'utilisateur passe au-dessus d'un lien ou d'une étiquette. Je ne veux pas que cet événement se produise immédiatement au cas où l'utilisateur déplacerait simplement la souris sur l'écran. Est-il possible de retarder le déclenchement de l'événement?

Merci.

Exemple de code:

$(function() {
    $('#container a').hover(function() {
        $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
            {filename:'file.txt'},
            function() {
                $(this).appendTo('#info');
            }
         );
    },
        function() { $('#info').remove(); }
    });
});

MISE À JOUR: (14/01/09) Après avoir ajouté le plugin HoverIntent, le code ci-dessus a été modifié pour le mettre en œuvre. Très simple à mettre en œuvre.

$(function() {
    hiConfig = {
        sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
        interval: 200, // number = milliseconds for onMouseOver polling interval
        timeout: 200, // number = milliseconds delay before onMouseOut
        over: function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
                function() {
                   $(this).appendTo('#info');
                }
             );
        }, // function = onMouseOver callback (REQUIRED)
        out: function() { $('#info').remove();  } // function = onMouseOut callback (REQUIRED)
    }
    $('#container a').hoverIntent(hiConfig)
}

Answer 1

Utilisez le plug-in hoverIntent pour jquery: http://cherne.net/brian/resources /jquery.hoverIntent.html

C’est absolument parfait pour ce que vous décrivez et je l’ai utilisé dans presque tous les projets nécessitant l’activation du menu au survol de la souris, etc.

Il existe un inconvénient à cette approche, certaines interfaces sont dépourvues d’état de survol, par exemple. les navigateurs mobiles comme safari sur l'iphone. Vous pouvez masquer une partie importante de l'interface ou de la navigation sans aucun moyen de l'ouvrir sur un tel appareil. Vous pouvez résoudre ce problème avec des CSS spécifiques à votre appareil.

Answer 2

Vous devez vérifier une minuterie en vol stationnaire. S'il n'existe pas (c'est-à-dire qu'il s'agit du premier survol), créez-le. S'il existe (c'est-à-dire que ce n'est pas le premier survol), tuez-le et redémarrez-le. Définissez la charge du minuteur sur votre code.

$(function() {
    var timer;

    $('#container a').hover(function() {
        if(timer) {
            clearTimeout(timer);
            timer = null
        }
        timer = setTimeout(function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
                {filename:'file.txt'},
                function() {
                    $(this).appendTo('#info');
                }
            );
        }, 500)
    },
    // mouse out
    });
});

Je parie que jQuery a une fonction qui résume tout cela pour vous.

Modifier : Ah oui, le plug-in jQuery à la rescousse

Answer 3

Totalement d’accord pour dire que hoverIntent est la meilleure solution, mais si vous êtes un malheureux qui travaille sur un site Web avec un processus long et prolongé d’approbation des plugins jQuery, voici une solution rapide et délicate qui a bien fonctionné pour moi:

$('li.contracted').hover(function () {
    var expanding = $(this);
    var timer = window.setTimeout(function () {
        expanding.data('timerid', null);

            ... do stuff

    }, 300);
    //store ID of newly created timer in DOM object
    expanding.data('timerid', timer);
}, function () {
    var timerid = $(this).data('timerid');
    if (timerid != null) {
        //mouse out, didn't timeout. Kill previously started timer
        window.clearTimeout(timerid);
    }
});

Celui-ci vient juste d’agrandir un < li > si la souris est dessus depuis plus de 300 ms.

Answer 4

Vous pouvez utiliser un appel setTimeout () avec clearTimeout () pour l'événement mouseout.

Answer 5

En 2016, la solution de Crescent Fresh n'a pas fonctionné comme prévu, alors j'ai proposé ceci:

$(selector).hover(function() {
    hovered = true;
    setTimeout(function() {
        if(hovered) {
            //do stuff
        }
    }, 300); //you can pass references as 3rd, 4th etc. arguments after the delay

}, function() {
    hovered = false;
});

Answer 6

Ma solution est facile. Retarder le menu ouvert si l’utilisateur garde mouseenter activé pendant plus de 300 ms:

var sleep = 0;
$('#category li').mouseenter(function() {
    sleep = 1;
    $('#category li').mouseleave(function() {
        sleep = 0;
    });
    var ob = $(this);
    setTimeout(function() {                         
        if(sleep) {
            // [...] Example:
            $('#'+ob.attr('rel')).show();
        }
    }, 300);
});