如果鼠标悬停在按钮上但移动，动画将重置

Question

I'm new to web developing and haven't found a solution for this. I have made a small website with a word that when the mouse hovers over it, a picture slides down while fading in, and when you move off the word, it slides back up and disappears.

The problem is that if I hover over the word and the animation runs, if I move the mouse slightly while still hovering over the word, the animation reverses. So basically, I'm on the word, the picture slides down, I move slightly (but still on it), the picture goes back up. That means that moving the mouse over a word makes this weird jerk motion with the picture, where it goes up and down a few times until you're off the word.

I would love a simple example of something similar, where moving the mouse on the word while already being on it, not affect the animation, and have it reverse ONLY when the mouse is completely off of it.

Thank you so much, if you have any questions, ask away!

Answer 1

You could do this:

$( "#element" ).mouseover(function() {
      //Animate in
    });
    $( "#element" ).mouseleave(function() {
       //Animate out
      });

Css(not too steady in css, but I think you can do something like this):

.object{
 top:0;
 animation-duration: 4s;
}
  .element:hover ~ .object{
  top:50px;

}