为什么在 jquery 中无法使用这种反弹效果？

Question

为什么没有效果？ We、Members 和 Listen 是 headers，它们会将您重定向到另一个页面，我的目的是让它们在您的鼠标位于其中一个按钮上时弹跳。

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

使用 hover/mouseenter 制作动画有点费力，但至少您可以使用 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;}
}

为什么在 jquery 中无法使用这种反弹效果？

Why isn't working this bounce effect in jquery?

html

javascript

jquery

effect

bounce