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を使用してホバーアクションをアニメーション化し、背景色の変化をよりスムーズ/アニメーション化したいと考えています。

それを行う最も簡単な方法は何ですか？

ご提案いただきありがとうございます。