jQuery Forum

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(true,true) in various locations 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? Code is below...

Cheers

Luke

2. // slideshow function
3. 
   
4. function slideSwitch() {
5.     var $active = $('#hp-featured div.active');
6.     if ( $active.length == 0 ) $active = $('#hp-featured div:last');
7.     var $next =  $active.next().length ? $active.next()
8.         : $('#hp-featured div:first');
9.     $active.addClass('last-active');
10.     $next.css({opacity: 0.0})
11.         .addClass('active')
12.         .animate({opacity: 1.0}, 1000, function() {
13.             $active.removeClass('active last-active');
14.         });
15. };
16. 
    
17. var playSlideshow =  setInterval( "slideSwitch()", 5000 );
18. 
    
19. // pauses the slideshow on mouseover, then plays again on mouseout
20. 
    
21. $(function() {
22. $('#hp-featured div').hover(function() {
23.      clearInterval(playSlideshow);
24. },
25. function() {
26.     playSlideshow =  setInterval( "slideSwitch()", 5000 );
27. });
28. });