如何調整此javascript代碼，以便每當鼠標懸停在元素上時激活動畫？

Question

因此，我將鼠標懸停在Justin Aguilar的CSS3動畫備忘單上的以下代碼來激活按鈕上的動畫：

<div id="object" class="pulse">
<script>
$('#animatedElement').hover(function() {
    $(this).addClass("pulse");
});
</script>

問題在於，即使我不再將鼠標懸停在按鈕上，動畫也只會繼續播放。 每當用戶將鼠標懸停在按鈕上方時，該怎么做才能使其具有動畫效果，而當用戶將鼠標移開時會停止動畫？ 每當我嘗試對涉及.stop的任何內容進行調整時，它都根本無法播放動畫。

我是編碼的新手，今天這是一個很大的痛苦，因此，非常感謝您的幫助！ 謝謝！

Answer 1

您根本不需要JavaScript。 使用CSS選擇器。 #animatedElement：懸停在您的情況下。

Answer 2

在這里，您還有另外一種解決方案

 $('#animatedElement').hover(function() { $(this).addClass("pulse"); }).mouseleave(function(){ $(this).removeClass("pulse"); }); 

 .pulse { background: #000; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="animatedElement">Hover Me!!!</div> 

希望這會幫助你。

Answer 3

hover()方法接受兩個回調：一個用於鼠標何時進入html元素，另一個用於何時離開。 因此，您可以簡單地向函數添加另一個回調以刪除“ pulse”類。

$('#animatedElement').hover(function() {
  $(this).addClass("pulse");
},
function(){
  $(this).removeClass("pulse");
});

另外，您也可以選擇Alex的出色答案。

Answer 4

您可以使用CSS制作動畫，例如，在以下代碼中：

.pulse {
    background: GREEN;
    border-radius: 6px
    transition-property: background, border-radius;
    transition-duration: 1s;
    transition-timing-function: linear;
}
.pulse:hover {
    background: BLACK;
    border-radius: 50%;
}

您已經在css中設置了元素的開始屬性和過渡聲明，在此示例中，當將鼠標懸停在具有脈沖類的元素上時，我將在背景和半徑屬性中進行過渡。