javascript - 如果鼠标悬停在按钮上但移动了动画重置

Question

我是网络开发的新手，还没有找到解决方案。 我用一个词做了一个小网站，当鼠标悬停在它上面时，图片会在淡入时向下滑动，当你离开这个词时，它会滑回并消失。

问题是，如果我将鼠标悬停在单词上并且动画开始运行，如果我在鼠标悬停在单词上的同时稍微移动鼠标，动画就会反转。 所以基本上，我说了算，图片向下滑动，我稍微移动(但仍在上面)，图片又向上移动。 这意味着将鼠标移到一个词上会使图片出现这种奇怪的颠簸运动，它会上下移动几次，直到你离开这个词。

我喜欢一个类似的简单示例，其中将鼠标移动到已经在其上的单词上，不影响动画，并且仅当鼠标完全离开时才反转。

非常感谢，有什么问题，尽管问!

Answer 1

你可以这样做:

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

Css(在css中不太稳定，但我认为你可以做这样的事情):

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

}