Mouseover et mouseleave trigger chaque fois que je déplace la souris à l'intérieur de l'élément donné

Je suis entrain de créer un site où vous placez le pointeur de la souris sur une image et il montre un élément (dans ce cas, en élargissant sa hauteur de 0 à 154px).

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 s'effondre lorsque la souris quitte, mais à chaque fois que la souris est déplacée dans l'élément le contenu se développe et s'effondre à plusieurs reprises jusqu'à ce que la souris quitte l'élément.

Je n'ai jamais eu ce problème avant, et j'ai utilisé ces fonctions dans le passé, donc je suis à une perte quant à ce qui se passe. Des idées?

Edit:

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

Je suis maintenant en utilisant le code ci-dessus et toujours exactement la même question. J'ai essayé toutes les variantes de la .fonction d'arrêt (false,false)(faux,vrai)(vrai,faux)(vrai,vrai). Le problème se produit différemment avec chacun, mais il se produit encore.

ULTIME EDIT:

Le problème était que le contenu que la souris est allé plus a été couvert par un contenu différent une fois que la fonction a été appelée. Par conséquent, à un point donné de la souris était à la fois entrant et sortant de l'image. Résolu le problème en déplaçant l'appel de la fonction à un élément différent.

source d'informationauteur bcloutier

  1. 12

    Essayez d'utiliser le .mouseenter événement à la place de la .mouseover

    Je pense que cela va faire!

  2. 6

    Vous pouvez avoir besoin d'utiliser mouseenter au lieu de mouseover et mouseleave au lieu de mouseout

    Ou vous pouvez essayer et utiliser .hover fonction 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);
    });
});
  3. 3

    Depuis que vous essayez de mettre en œuvre ce sur un conteneur, votre gestionnaire d'événement sont 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);
});
  4. 2

    l'ajout d'un .stop() avant votre .animate() va aider à résoudre ce problème.
    par l'arrêt de l'animation précédente, cela empêche l'animation de tir à plusieurs reprises si l'utilisateur déplace la souris sur l'élément de nombreuses fois rapidement

  5. 0

    Même si cela peut ne pas être tout à fait pertinentes, j'ai eu un problème similaire. Tout ce que je voudrais passer ma le plus au cours de la div, l'événement aurait le feu. Pour le résoudre, j'ai réalisé que lorsque le "hover" événement a été déclenché, la bascule div était devenu l'une de mes souris a été plus de. Pour le fixer, j'ai juste ajouté un évènement sur que l'un de fondu sur la souris quitter.

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


    <img src="img/somebody.jpg" class="profile-image">
                    <div class="profile-about">
                        <p>
                         Hello I am somebody!
                        </p>
                    </div>