Javascript mootools retarder afficher/masquer le menu multiniveau

Question

J'ai créé un menu javascript avec css et javascript. J'ai utilisé quelques mootools (1.11, la seule version que je peux utiliser).

Le script s'exécute sur domready, il récupère un élément dom et ajoute des fonctions (showmenu, hidemenu) sur les événements mouseenter et mouseeleave. L'élément dom est constitué de trois niveaux d'ul/li imbriqués.

Maintenant je veux ajouter un délai sur le menu de 500 ms quand on passe sur le menu pour la première fois, et encore quand les utilisateurs quittent le menu (de sorte que l'utilisateur a une demi-seconde pour revenir à le menu). Je ne sais pas comment garder trace des événements, et les annuler. Ma connaissance de javascript n'est pas assez bonne pour savoir par où commencer. Quelqu'un peut-il me donner un exemple comment je devrais créer cela? Pas vraiment à la recherche de code couper et coller, plus de pointeurs dans le fonctionnement de javascript, quelles fonctions natives je pourrais utiliser, et quelle est la meilleure façon de mettre quelque chose comme ça en place. Merci à l'avance

p.s. Peut-être que je veux aussi avoir un délai (100 ms environ) lorsque l'utilisateur utilise déjà le menu pour que les éléments apparaissent. Est-ce que ce sera beaucoup plus complexe?

Answer 1

peut-être cela peut vous donner une idée: http://www.jsfiddle.net/dimitar/stthk/ (extrait d'une autre classe de menu je travaille et modded de retard pour vous à titre d'exemple)

essentiellement plusieurs bits intéressants:

options: { 
    showDelay: 500, 
    hideDelay: 500 
}, 

définit vos délais sur mouseover et out.

puis la liaison pour mouseenter différée via .delay():

mouseenter: function() { 
    $clear(_this.timer); 
    _this.timer = (function() { 
     this.retrieve("fold").setStyle("display", "block"); 
    }).delay(_this.options.showDelay, this); 
}, 
mouseleave: function() { 
    $clear(_this.timer); 
    _this.timer = (function() { 
     this.retrieve("fold").setStyle("display", "none"); 
    }).delay(_this.options.hideDelay, this); 
} 

_this.timer est un var partagé qui gère la fonction différée - il est effacé sur soit mouseout ou mouseover. si aucun événement important n'a lieu dans le délai imparti, l'affichage sera modifié en conséquence, sinon, il annulera la fonction.

Ceci est pour mootools 1.2.5 btw (système de stockage + délégation elment) mais le principe reste le même pour les bits qui comptent.

Answer 2

La manière élégante/anale de le faire serait de fondre dans/hors du menu. Vous faites cela avec Fx.Morph où vous modifiez la propriété css opacity et définissez la propriété complete pour supprimer réellement la div - notez que c'est différent pour que cela fonctionne dans IE5-7.

La méthode la plus simple/la plus sensée consiste à utiliser setTimeout().