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

这是因为你只写了一个顶部：0。尝试写上：0％像这样：

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

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

Answer 2

将第一个函数中的'0'更改为'10%'在它重新启动之前，它会从0开始急速下降。