Jquery accordion help needed

Can anyone point in the right direction to get a jquery accordion menu to scroll/slide/cycle from right to left on page load? An example of what I want is below along with my live accordion but the example website uses adobe flash and I want to accomplish it with jquery


My jquery code:


<script type="text/javascript">
//<![CDATA[

jQuery.noConflict();
jQuery(document).ready(function($) {

<?php if(is_front_page()){ ?>
$(document).ready(function(){

activeItem = $("#accordion li:eq(3)");
$(activeItem).addClass('active');
$("#accordion li").hover(function(){
$(activeItem).animate({width: "50px"},{duration:300,queue:false});
$(this).animate({width: "500px"}, {duration:300, queue:false});
activeItem = this;
});

});

My css:

#accordion {
list-style: none;
margin: 5px 5px 5px 5px;

padding: 0;
height: 315px;
overflow: hidden;
background: #AF6A05;}

#accordion li {
float: left;
border-left:
display: block;
height: 315px;
width: 50px;
padding: 5px 0px;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: .0em;
border-left: 1px solid #fff;}

#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -10px 10px 0 0;
}

#accordion li.active {
width: 500px;
}

My clients website:

fmbluegrass dot com

Example website:
I want it to do what is on this website:

wgmortho dot com

I don't need the fadeIn but do want the images to cycle continually unless someone hovers on the image to click to the page.