Retarder l’événement en vol stationnaire?

Je voudrais retarder un événement en vol stationnaire en jquery. Je lis à partir d’un fichier lorsque l’utilisateur survole un lien ou une étiquette. Je ne veux pas que cet événement se produise immédiatement si l’utilisateur déplace simplement la souris sur l’écran. Y a-t-il un moyen de retarder l’événement du tir?

Je vous remercie.

Exemple de code:

$(function() { $('#container a').hover(function() { $('
').load('ReadTextFileX.aspx', {filename:'file.txt'}, function() { $(this).appendTo('#info'); } ); }, function() { $('#info').remove(); } }); });

MISE À JOUR: (14/01/09) Après avoir ajouté le plug-in 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() { $('
').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) }

    Utilisez le plugin hoverIntent pour jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html

    Il est absolument parfait pour ce que vous décrivez et je l’ai utilisé sur presque tous les projets qui nécessitaient l’activation de la souris sur les menus, etc.

    Il y a une approche à cette approche, certaines interfaces sont dépourvues d’un état de «vol stationnaire», par exemple. les navigateurs mobiles comme le safari sur l’iphone. Vous pouvez cacher une partie importante de l’interface ou de la navigation sans pouvoir l’ouvrir sur un tel appareil. Vous pouvez contourner ce problème avec les CSS spécifiques à l’appareil.

    Vous devez vérifier une timer 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 utile du minuteur sur votre code.

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

    Je parie que jQuery a une fonction qui couvre tout cela pour vous.

    Edit : Ah oui, le plugin jQuery à la rescousse

    Tout à fait d’accord que hoverIntent est la meilleure solution, mais si vous êtes un fainéant qui travaille sur un site Web avec un long processus d’approbation des plugins jQuery, voici une solution rapide et efficace 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 est juste pour développer un

  • si la souris a été dessus pendant plus de 300 ms.
  • Vous pouvez utiliser un appel setTimeout () avec un clearTimeout () lors de l’événement mouseout.

    En 2016, la solution de Crescent Fresh ne fonctionnait pas comme prévu pour moi, alors j’ai trouvé 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; }); 

    Ma solution est facile. Retarder le menu ouvert si l’utilisateur maintient le paramètre mouseenter sur obj à 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); });