Mouseover and mouseleave trigger every time I move the mouse inside the given element

Question

I am creating a site where you hover the mouse over an image and it shows an element (in this case by expanding its height from 0 to 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);
    });
});

The content expands when the mouse enters and collapses when the mouse leaves, but every time the mouse is moved within the element the content expands and collapses repeatedly until the mouse leaves the element.

I've never had this issue before, and I have used these functions in the past, so i'm at a loss as to what is going on. Any ideas?

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

I am now using the code above and still getting the exact same issue. I have tried all variations of the .stop function (false,false)(false,true)(true,false)(true,true). The issue occurs differently with each one, but it still occurs.

ULTIMATE EDIT:

The problem was that the content that the mouse went over was covered up by different content once the function was called. Therefore, at any given point the mouse was simultaneously entering and leaving the image. Solved the issue by moving the function call to a different element.

Answer 1

Try using the .mouseenter event instead of the .mouseover

I think that will do!

Answer 2

You may need to use mouseenter instead of mouseover and mouseleave instead of mouseout

Or you may try and use .hover function as below,

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

Answer 3

Since you are trying to implement this on a container, your correct event handler are mouseenter and mouseleave.

Example:

$("#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);
});

Answer 4

adding a .stop() before your .animate() will help fix this. by stopping the previous animation this prevents the animation firing multiple times if the user moves their mouse over the element many times quickly

Answer 5

Although this may not be completely relevant, I had a similar issue. Everything I would move my most over the div, the event would fire. To solve it, I realized that when the 'hover' event was triggered, the toggled div had become the one my mouse was over. To fix it, I just added an event on that one to fade it out on mouse leave.

    .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>