Fading jQuery slideshow flicker / queue problem on mouseover (slideSwitch.js)

Question

I've adapted code from the slideSwitch.js tutorial by Jon Raasch, which is basically a fading slideshow. The script promotes the 'active' slide to a higher z-index and animates the opacity for a fading effect.

It's working fine with a pause added to stop the slideshow temporarily on mouseover.

The issue I'm having is I'm trying to stop the script from queuing up when repeatedly mousing over/off the slideshow. When this happens it flickers and goes berserk.

I've experimented with stop() but haven't got it working properly.

Can someone advise me where to insert this in the following code? Or if I am going about it the wrong way!!

Cheers

Luke

function slideSwitch() {
var $active = $('#hp-featured div.active');
if ( $active.length == 0 ) $active = $('#hp-featured div:last');
var $next =  $active.next().length ? $active.next()
    : $('#hp-featured div:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}
$(function() {
    var playSlideshow =  setInterval( "slideSwitch()", 5000 ); 
 $('#hp-featured div').hover(function() {
     clearInterval(playSlideshow);
  },
  function() {
      playSlideshow =  setInterval( "slideSwitch()", 5000 );
  });
});

Answer 1

Ok I solved this one, the problem was not in the code but in the fact that there was an additional div nested inside the parent 'slide' div. The function was firing off both of them and causing the mayhem.

Cheers