javascript - jquery - 用动画改变背景

Question

我的下拉菜单有以下代码：

  <ul>

    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a>
      <ul>
        <li><a href="#"> Menu 6.1</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 7</a></li>
  </ul>

</div>

使用以下CSS：

#nav-menu li a
{
    background-image:url('../images/menu_background.png');  
    background-repeat:repeat-x;
    background-position: left top;
    height: 35px;
    line-height: 35px;
    float: left;
    width: 144px;
    display: block;
    color: #f3f6fb;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}


#nav-menu li a:hover
{
    background-image:url('../images/menu_background_hover.png');  
    background-repeat:repeat-x;
    background-position: left top;
    height: 35px;
    line-height: 35px;
    float: left;
    width: 144px;
    display: block;
    color: #f3f6fb;
    text-decoration: none;
    text-align: center;
}

当我将鼠标悬停在下拉菜单项上时，背景图像会发生变化。我想使用 jquery 或 javascript 为悬停动作设置动画，以使背景颜色变化更加平滑/动画。

最简单的方法是什么？

非常感谢您的建议。