Mouseover et mouseleave se déclenchent chaque fois que je déplace la souris dans l’élément donné

Je crée un site où vous passez la souris sur une image pour afficher un élément (dans ce cas, en augmentant sa hauteur de 0 à 154 pixels)

jQuery(document).ready(function(){ jQuery("#dropdown-menu-create .dropimage").mouseover(function(){ jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200); }); jQuery("#dropdown-menu-create .dropimage").mouseout(function(){ jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200); }); }); 

Le contenu se développe lorsque la souris entre et se réduit lorsque la souris quitte la souris, mais chaque fois que la souris est déplacée dans l’élément, le contenu se développe et se réduit à plusieurs resockets jusqu’à ce que la souris quitte l’élément.

Je n’ai jamais eu ce problème auparavant, et j’utilisais ces fonctions dans le passé, alors je ne sais pas ce qui se passe. Des idées?

Modifier:

 jQuery(document).ready(function(){ jQuery("#dropdown-menu-create .dropimage").mouseenter(function(){ jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"154px"},200); }); jQuery("#dropdown-menu-create .dropimage").mouseleave(function(){ jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"0"},200); }); }); 

J’utilise maintenant le code ci-dessus et je reçois toujours exactement le même problème. J’ai essayé toutes les variantes de la fonction .stop (false, false) (false, true) (true, false) (true, true). Le problème se produit différemment avec chacun, mais il se produit toujours.

ULTIMATE EDIT:

Le problème était que le contenu survolé par la souris était recouvert par un contenu différent une fois la fonction appelée. Par conséquent, à tout moment, la souris entrait et sortait simultanément de l’image. Résolu le problème en déplaçant l’appel de fonction vers un élément différent.

Essayez d’utiliser l’événement .mouseenter au lieu de .mouseover

Je pense que ça ira!

Vous devrez peut-être utiliser mouseenter au lieu de mouseover et mouseleave au lieu de mouseout

Ou vous pouvez essayer d’utiliser la fonction .hover comme ci-dessous,

 jQuery(document).ready(function(){ jQuery("#dropdown-menu-create .dropimage").hover(function(){ //mouseenter jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200); }, function(){ //mouseleave jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200); }); }); 

Puisque vous essayez d’implémenter cela sur un conteneur, votre gestionnaire d’événements correct est mouseenter et mouseleave .

Exemple:

 $("#dropdown-menu-create .dropimage").mouseenter(function(){ $("#dropdown-menu-create .toggle").animate({height:"154px"},200); }); $("#dropdown-menu-create .dropimage").mouseleave(function(){ $("#dropdown-menu-create .toggle").animate({height:"0"},200); }); 

l’ajout d’un .stop () avant votre .animate () aidera à résoudre ce problème. en arrêtant l’animation précédente, cela empêche l’animation de se déclencher plusieurs fois si l’utilisateur déplace sa souris sur l’élément plusieurs fois rapidement

Bien que cela ne soit peut-être pas tout à fait pertinent, j’avais un problème similaire. Tout ce que je déplacerais le plus au-dessus de la division, l’événement se déclencherait. Pour le résoudre, j’ai réalisé que lorsque l’événement “survol” a été déclenché, la div à bascule était devenue celle sur laquelle ma souris était terminée. Pour résoudre ce problème, je viens d’append un événement sur celui-ci afin de le faire disparaître en fondu.

  .profile-about { position: absolute; width: 100%; height: 100%; top: 5%; left: 0; z-index: 2; display: none; } .profile-image { max-height: 300px; max-width: 300px; -webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75); } $('.profile-image').hover(function(){ $(this).next().fadeIn(100); }); $('.profile-about').mouseleave(function(){ $(this).fadeOut(100); });  

Hello I am somebody!