Advice about how to animate the background of a list item
<p>I was wondering if you can offer me a better way of achieving the effect Ive created in this fiddle: <a href="http://jsfiddle.net/YLuKh/1/" rel="nofollow">http://jsfiddle.net/YLuKh/1/</a></p>

<p>Basically I would like to animate the background colour of the anchor tag revealing an image which I've done by positioning an anchor tag on top of a span on top of an image and then on hover animate the width of the span. Can anyone suggest a more straight forward way of doing this?</p>

<p>HTML</p>

<pre><code>&lt;ul id="test"&gt;
    &lt;li&gt;
        &lt;a href=""&gt;This is the link&lt;/a&gt;
        &lt;span class="bg"&gt;&lt;/span&gt;
        &lt;img src="http://www.ritaxxii.org/wp-content/uploads/Luxury-Bedroom-Furniture-1.jpg" /&gt;
&lt;/li&gt;
&lt;/ul&gt;​
</code></pre>

<p>JS</p>

<pre><code>$(document).ready(function() {

    var li_width = $('#test').find('li').width();
    console.log(li_width);


    $('#test').find('li').on('mouseover', function() {
        $(this).find('.bg').stop().animate({
            width: '0'
        }, 200);
    }).on('mouseout', function() {
        $(this).find('.bg').stop().animate({
            width: li_width
        }, 200);
    });

});​
</code></pre>
