jQuery fadeIn fadeOut (ou afficher/masquer) numéro

Question

J'essaie d'afficher une info-bulle lorsque vous passez la souris sur un jour dans un contrôle de calendrier. J'utilise respectivement l'événement mouseenter/mouseleave pour fadeIn/fadeOut. Cela marche. Cependant, mon problème est que, comme il s'agit d'un calendrier, il y aura plusieurs jours et quand je déplace ma souris sur toute la semaine, le fadeIn/fadeOut (ou show/hide) se produira tous en séquence, jusqu'à ce que tous les événements sont terminés ... il y a une sorte de retard parce qu'ils se produisent tous dans l'ordre.

Quel serait le meilleur moyen d'empêcher cela de se produire?

Answer 1

Si vous avez un conteneur parent autour de votre semaine, vous pouvez simplement faire l'effet sur cet article.

Answer 2

Je vous suggère de gérer tout un événement pour toute la semaine, puis détectez quel jour a été sélectionné

Answer 3

j'ajouter une logique pour vérifier s'il y a déjà une info-bulle affichée, et si oui, déplacez et mettre à jour le texte. La partie difficile ajoute de la logique pour s'assurer que le fadeOut ne se produit que si le texte n'a pas changé. La première chose à faire est d'ajouter un petit délai avant de fondre en utilisant setTimeout. Deuxièmement, créez une variable que vous incrémentez chaque fois que le texte de l'info-bulle est mis à jour. Enfin, assurez-vous que chaque appel à setTimeout inclut une copie de l'entier, et avant d'appeler le fondu, vérifiez que l'entier n'a pas changé.

Answer 4

Découvrez ce plugin jQuery appelé hoverIntent ... il devrait résoudre votre problème.