javascript - jQuery .hover() 动画不平滑 - 悬停效果上有小凹凸/急动

Question

我有这个简单的 jQuery 悬停效果，它可以工作，但并不完美 - 当您输入列表项(悬停)时，动画会在底部产生一个小急动/碰撞，这是为什么？然而，当离开元素时，动画很流畅(使用的浏览器 - Chrome)

HTML:

<div id="div1">
<ul>
  <li><a>JP Links</a></li>
  <li><a>JP Middel</a></li>
  <li><a>JP Regs</a></li>
</ul>
</div>

jQuery:

$('#div1 ul li').hover(
    function(){
        $(this).find('a').animate({'top': '0'}, 'slow');
    }, 
    function(){
        $(this).find('a').animate({'top': '75%'}, 'slow');
    }                 
);

参见FIDDLE

Answer 1

这是因为您只写了 top: 0。尝试这样写 top: 0% :

$(this).find('a').animate({'top': '0%'}, 'slow');

我不知道为什么，但它有效。