I am trying to create an animation in javascript that is triggered by a mouseover event and then returns to the initial state on mouse out. When the user runs their cursor over an image on the page, another div with an initial height of 0px gradually rises in height to 50px over the bottom portion of the image.
The problem I am facing is that when they move the cursor from the image to the div which now covers the bottom portion of the image, it triggers the mouseout (as it is a separate element from the image) and then a new mouseover event in quick succession because the div disappears when it detects that the cursor is no longer over the image (meaning the div appears and disappears quickly, over and over again).
I am wondering how I would go about breaking such a loop so that the div does not disappear when the cursor runs over it from the image (i.e. prevent the onmouseout event from triggering unless the mouse moves to some other element that is not the newly created div).
Here’s an image to hopefully better illustrate the problem:
I think for this situation you’d want to use a wrapper div around both the image and the div you’re animating. Attach the mouseover/mouseout events to the wrapper and they will trigger when you’re expecting them to. Here’s a jsfiddle example