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

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