Pourquoi ne fonctionne pas cet effet de rebond dans jquery?

Question

Pourquoi ne fonctionne pas l'effet? , Members et Listen sont des en-têtes qui vous redirigent vers une autre page et mon intention était de les faire rebondir lorsque votre souris est sur l'un de ces boutons.

HTML:

<a id="asd" class="asd" href="a.html">We</a> 
<a>&nbsp;&nbsp;&nbsp;&nbsp; </a> 
<a id="asd" class="asd" href="b.html">Members</a> 
<a id="asd" class="asd" href="c.html">Listen</a> 

jQuery:

$(document).ready(function() { 

     $(".asd").mouseenter(function(){ 
     $(".asd").effect("bounce", 
      {times:3}, 300); 
     }); 
}); 

Answer 1

utilisant vol stationnaire/mouseenter pour l'animation est finnicky, mais au moins vous aurez plus de contrôle en utilisant le CSS. Essaye ça?

.asd{ 
    position: relative 
} 

.asd:hover{ 
    animation: bounceText .5s; 
    -webkit-animation: bounceText .5s; 
} 

@-webkit-keyframes bounceText { 
    0%  {top: 0px;} 
    50% {top: 10px;} 
    100% {top: 0px;} 
} 

@keyframes bounceText { 
    0%  {top: 0px;} 
    50% {top: 10px;} 
    100% {top: 0px;} 
}