title: Stop on mouse over on a simple jquery slider
body: <p>I have a real simple jquery slider, it fits well for my use.
  Just linked images, no controls, thumbs, nothing, really simple!</p>
  
  <p>I'm trying to make it stoo while the mouse cursor is over it, but i wasn't able to.
  Can anyone help me here?</p>
  
  <p>slider.js</p>
  
  <pre><code>function slideSwitch()
      {
          var $active = $('#slideshow a.active');
          if ( $active.length == 0 ) $active = $('#slideshow a:last');
          var $next =  $active.next().length ? $active.next()
          : $('#slideshow a:first');
  
          $active.addClass('last-active');
  
          $next.css({opacity: 0.0})
          .addClass('active')
          .animate({opacity: 1.0}, 1000, function()
          {
              $active.removeClass('active last-active');
          });
  }
  $(function()
  {
      setInterval( "slideSwitch()", 10000 );
  });
  </code></pre>
  
  <p>slider.css</p>
  
  <pre><code>#slideshow { height: 300px; position: relative; width: 960px; }
  #slideshow a { left: 0; opacity: 0.0; position: absolute; top: 0; z-index: 8; }
  #slideshow a.active { opacity: 1.0; z-index:10; }
  #slideshow a.last-active { z-index: 9; }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div id="slideshow"&gt;
          &lt;a href="#" class="active"&gt;&lt;img src="img/slideshow/slide1.png" alt="Engine - Development Solutions" /&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img src="img/slideshow/slide2.png" alt="Engine - Development Solutions" /&gt;&lt;/a&gt;
          &lt;a href="#"&gt;&lt;img src="img/slideshow/slide3.png" alt="Engine - Development Solutions" /&gt;&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>THANKS!</p>