title: Stop slideshow on mouseover
body: <p>I have a slideshow that shifts between 3 different images that are separated in a <code>DIV</code> tag. I want when you hover the mouse over the slideshow it should stop and when you take the mouse off the slideshow it should continue roll through it.</p>
  
  <p>The code is here:</p>
  
  <pre><code>function slideSwitch() {
      var $active = $('#slideshow3 div.active3');
      if ($active.length == 0 ) $active = $('#slideshow3 div:last');
  
      var $next = $active.next().length ? $active.next() : $('#slideshow3 div:first');
      $active.addClass('last-active3')
      .animate({opacity : 0.0}, 1000);
      $next.css({opacity: 0.0})
          .addClass('active3')
          .animate({opacity: 1.0}, 1000, function() {
              $active.removeClass('active3 last-active3');
          });
  }
  </code></pre>
  
  <p>I tried for starters do something like this:</p>
  
  <pre><code>$("#slideshow3").mouseover(function(){
      $(this).stop();
      return false;
  });
  </code></pre>
  
  <p>But the slideshow did not even stop, so I'm definitely not targeting it correctly or putting the code in at the right place.</p>
  
  <p>Can you give me some suggestions ?</p>
  
  <p>Thank you!</p>