Jquery Animated Tab - revert on mouseout
<p>I'm trying to adapt Gaya Design's Animated Tabbed Content <a href="http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/" rel="nofollow">http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/</a> for a navigation menu. I want to have the background verting back to the first tab on mouseout but can't seem to get that working. Below is the Javascript for moving background function:</p>

<pre>
var TabbedContent = {
    init: function() {  
        $(".tab_item").mouseover(function() {
            var background = $(this).parent().find(".moving_bg");
            $(background).stop().animate({
                left: $(this).position()['left']
            }, {
                duration: 300
            });
            TabbedContent.slideContent($(this));
        });
    },
}
$(document).ready(function() {
    TabbedContent.init();
});
</pre>

<p>And here is a link to what I'm trying to achieve. <a href="http://www.stimulatingminds.co.uk/test/slider/slide.html" rel="nofollow">Link</a></p>

<p>Any help on how to get the background to revert to tab one on mouseout will be very much appreciated!</p>

<p>Thanks</p>
