動畫重置，如果鼠標懸停在按鈕上，但移動

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; 

}