How to harness control of my JQuery coded sliding divs?
<p>Essentially I have 4 divs that take turns sliding in and sliding out with delays and then it recalls the function.  Like so:</p>

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

$("#slide1").delay('1000').slideDown('1000').delay('6000').slideUp('1000');
$("#slide2").delay('9000').slideDown('1000').delay('6000').slideUp('1000');
$("#slide3").delay('17000').slideDown('1000').delay('6000').slideUp('1000');
$("#slide4").delay('25000').slideDown('1000').delay('6000').slideUp('1000', 'swing',      bradslide);
}
);
</code></pre>

<p>Let me say that this works fine, but that I am open to cleaning it up or making it easier or more up to standard if suggestions are made.</p>

<p>However my question is this: How can I arrange this so that the end user can manipulate the animation.  This slides through the divs on its own, but ideally I would like to have a couple buttons to click to go backward or forwards (I think you get the idea).</p>

<p>Any suggestions of how or where to begin would be greatly appreciated.  I imagine I might have to scrap this little piece of code as it stands.  Thanks in advance guys.</p>
