css - 图像的动画运动

Question

首先是一点代码=]:

CSS:

.mainnav li:hover{
   background:url("/css/images/nav.png") no-repeat scroll 0 0 transparent;
}

脚本:

$(document).ready(function() {

  $('.mainnav li').mouseover(function() {
    $(this).stop().animate(????,400)
  });
});

html:

<ul class="mainnav">
  <li>
   <a href="/Home.aspx">home</a>
  </li>
  ..
  ..
</ul>

我想要的是，当鼠标移到另一个 li 上时，图像不会立即移动/弹出，而是会缓慢地(“动画”)移动到那里..

谢谢。

Answer 1

要为背景位置设置动画，您需要 plugin因为 jquery 不是开箱即用的。链接页面上的用法。