爲什麼不在jQuery中使用這種彈跳效果？

Question

爲什麼不起作用？ We,Members和Listen是將您重定向到另一頁的標題，我的意圖是讓鼠標在其中一個按鈕上時彈起。

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

使用懸停/的mouseenter動畫是finnicky，但至少你會使用CSS有更多的控制。嘗試這個？

.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;} 
}