Fade in/out and pause on mouse over with jQuery
<p>I've wrote a quick jQuery snippet to automatically fades in/out a set of div's at a pre-set interval. My code looks like this:</p>

<p>HTML</p>

<pre><code>&lt;div id="container"&gt;
&lt;div&gt;
       &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
       &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
       &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>JAVASCRIPT</p>

<pre><code>function InOut(elem)
{
elem.delay()
 .fadeIn(600)
 .delay(5000)
 .fadeOut(600,
     function(){
        if(elem.next().length &gt; 0) 
          { InOut(elem.next()); }
        else
          { InOut(elem.siblings(':first')); }

      }
    );
}

$('#container div').hide();
InOut($('#container div:first'));
</code></pre>

<p>Is it possible to have this effect pause when a user mouseover's one of the  elements within the #container? I've made several attempts with no luck.</p>

<p>Any help would be much appreciated!</p>
