JQuery menu déroulant à l'aide de slideup et slidedown sur le vol stationnaire est jumpy
j'ai fait un menu déroulant très simple en utilisant le slideup de jQuery et le slidedown pour les fonctions - mais il devient très nerveux (J'utilise Firefox 3.6.8) si la souris est déplacée pour rapidement au-dessus de lui, ou si la souris est tenue sur un des articles de sous-menu.
j'ai fait un exemple de travail au lien suivant:
Sans le .fonction stop (true, true) c'est encore pire. J'ai aussi essayé d'ajouter sensitif intention, mais parce que j'ai un diaporama déclenché en vol stationnaire dans la même div, il entre en conflit avec la fonctionnalité du diaporama.
<!-- Y a-t-il quelque chose que je manque? J'ai entendu dire que clearqueue pourrait fonctionner, ou peut-être le temps mort, mais je ne sais pas où les ajouter.Merci à tous.
2 réponses
vous pouvez construire dans un léger délai, disons 200ms pour que l'animation soit complète donc ce n'est pas nerveux, mais laissez .stop() donc il ne s'accumule toujours pas, comme ceci:
$(function () {
$('#nav li').hover(function () {
clearTimeout($.data(this, 'timer'));
$('ul', this).stop(true, true).slideDown(200);
}, function () {
$.data(this, 'timer', setTimeout($.proxy(function() {
$('ul', this).stop(true, true).slideUp(200);
}, this), 200));
});
});
Vous pouvez l'essayer ici, cette approche utilise $.data() pour stocker le timeout par l'élément donc chaque menu est géré indépendamment, si vous avez beaucoup d'éléments de menu, cela devrait donner un joli effet.
celui - ci ajoute un léger retard sur open-donc l'écraser rapidement ne fera pas apparaître le menu.
$(function () {
$('#nav li').hover(function () {
$('ul', this).stop(true, true).delay(200).slideDown(200);
}, function () {
$('ul', this).stop(true, true).slideUp(200);
});
});