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()
• 关闭</span>

你的jQuery应该是这样的：

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

实际上是：

的简写

$("span").on({
   mouseenter: function() {
     $('img').addClass("bounce");
   },
   mouseleave: function() {
     $('img').removeClass("bounce");
   }
});

这是一个演示：

$(document).ready(function() {

  $("span").hover(function() {
    $('img').toggleClass("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;
  }
}

<img src="https://pizzapgh.github.io/test_bsb/assets/burger-icon.png">
<span>hover</span>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

仅限CSS的方式

您也可以反转HTML元素的顺序而不是使用jQuery，而是使用+ 下一个兄弟选择器：

span:hover + img {
  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;
  }
}

<span>hover</span>
<img src="https://pizzapgh.github.io/test_bsb/assets/burger-icon.png">

Answer 2

使用.toggleClass()：

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

Answer 3

只需在mouseleave上添加一个删除类

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

 $("span").mouseleave(function(){
  $("img").removeClass("bounce");
 });

});