Jquery悬停动画只有一次

Question

每当用户将鼠标悬停在文本上时，汉堡包就会弹起。我遇到的问题是悬停时只会反弹一次。每次悬停时我都希望它弹跳。

https://codepen.io/drunktuts/pen/gxzYJy

$(document).ready(function(){
  $("span").hover(function(){
  $('img').addClass("bounce");
  });
});

.bounce{
animation: bounceOut 0.4s linear;
}
@keyframes bounceOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
        transform: scale(1);
}
25% {
opacity: 1;
-webkit-transform: scale(0.97);
        transform: scale(0.97);
}
50% {
opacity: 1;
-webkit-transform: scale(1.19);
        transform: scale(1.19);
}
75% {
opacity: 1;
-webkit-transform: scale(1);
        transform: scale(1);
}
 100% {
 opacity: 1;
 }
}

Answer 1

使用.toggleClass():

$(document).ready(function(){
  $("span").hover(function(){
    $('img').toggleClass("bounce");
  });
});