Mouseover and mouseleave trigger every time I move the mouse inside the given element
Question by bcloutier
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 by Starx
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);
});
