jquery -change background with animation
<p>I have the following code for my drop down menu:  </p>

<p></p>

<pre><code>  &lt;ul&gt;

    &lt;li&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Menu 5&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Menu 6&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt; Menu 6.1&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Menu 7&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;

&lt;/div&gt;
</code></pre>

<p>with the following css:</p>

<pre><code>#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;
}
</code></pre>

<p>The background image changes when I hover over the drop down menu items. I would like to animate the hover action using jquery or javascript to make the background colour change more smooth/animated.</p>

<p>What's the simplest way of doing it?</p>

<p>Thanks a lot for your suggestion.</p>
