2009-01-12 8 views
92

Je voudrais retarder un événement de survol dans jquery. Je lis à partir d'un fichier lorsque l'utilisateur survole un lien ou une étiquette. Je ne souhaite pas que cet événement se produise immédiatement si l'utilisateur déplace simplement la souris sur l'écran. Y at-il un moyen de retarder l'événement de tirer?Retarder jquery hover event?

Merci.

code Exemple:

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

MISE À JOUR:(1/14/09) Après avoir ajouté le plug-in HoverIntent le code ci-dessus a été changé pour ce qui suit pour la 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) 
} 
+1

Merci de fournir une utilisation pour hoverIntent – JavaKungFu

Répondre

90

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 nécessitant l'activation des menus etc mouseover ...

Il y a un gotcha à cette approche, certaines interfaces sont dépourvues d'un état «hover» par exemple. navigateurs mobiles comme Safari sur l'iPhone. Vous pouvez masquer une partie importante de l'interface ou de la navigation sans pouvoir l'ouvrir sur un tel périphérique. Vous pouvez contourner cela avec CSS spécifique à l'appareil.

+0

Ou ce plugin fonctionne aussi comme un charme https: // github.com/john-terenzio/jQuery-Hover-Delay – mica

6

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

48

Vous devez vérifier une minuterie en survol. S'il n'existe pas (c'est-à-dire le premier hover), créez-le. S'il existe (c'est-à-dire et non le premier survol), tuez-le et redémarrez-le. Réglez la charge utile de la minuterie à 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 enveloppe tout cela pour vous.

Modifier: Ah oui, jQuery plugin to the rescue

+9

Merci quand même pour une solution sans plugin! – Jrgns

+4

J'ai ajouté un clearTimeout (timer); timer = null; dans le côté de mouseout, mais cela a fonctionné parfaitement et a évité YAP (encore un autre plugin) – Andiih

+0

@Andiih Grand appel, et merci de m'avoir présenté à l'acronyme "YAP". – Jon

-2

Ma solution est facile. Menu du délai ouvert si l'utilisateur en gardant mouseenter sur obj sur 300ms:

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

suis totalement d'accord que hoverIntent est la meilleure solution, mais si vous arrive d'être un gazon malheureux qui travaille sur un site Web avec un processus long et prolongé pour approbation des plugins jQuery, voici une solution rapide et sale 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 l'expansion d'une <li> si la souris est sur elle pendant plus de 300 ms.

+0

Merci, a trouvé cela plus utile que les autres réponses. – Ray

1

En 2016 la solution du Croissant frais n'a pas fonctionné comme prévu pour moi, donc je suis venu avec 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; 
});