Question

I’m building a simple slideshow using jQuery. I have the basics down, but as a relative jQuery newcomer, I feel like I’m fighting with the animation queue and not making much progress.

I’ve created a slideshow by making a function that receives a numeric index of the first slide to show. It fades in the slide, pauses, fades out the slide, then calls itself, passing the numeric index of the next slide. This much works perfectly.

The problem happens when I try to allow user interaction. I’ve created a button that should allow the user to start the slideshow at a specific slide. This button clears the queue, then fades out the current slide, then starts the slideshow function, passing in the index of a specific slide to start at. This also works well. Problems start to happen when the button is clicked quickly several times. Quirky things start happening, like the intended slide will fade in, but only halfway, or the slide following it fades in several times in a row.

I’ve tried throwing “stop()” and “clearQueue()” in at semi-random places, but so far I haven’t much luck. For someone with a firm grasp on how the animation queue works, this is (hopefully) a simple fix — unfortunately, that someone is not me yet.

Here’s the heart of the code. To see a live, ultra-simplified version of the problem, see: http://martinsmucker.com/demo/slideshow.html

HTML:

<div id="slideshow_container">
    <div class="slide" id="slide1"></div>
    <div class="slide" id="slide2"></div>
    <div class="slide" id="slide3"></div>
    <div class="slide" id="slide4"></div>
</div>
<button>Purple</button>

jQuery:

runSlideShow(1);

$('button').click(function(){
    $('.slide:visible').clearQueue().fadeOut(500, function(){
        runSlideShow(3);
    });
});

function runSlideShow (slideNumber)
{
    $('#slide' + slideNumber).fadeIn(500).delay(3000).fadeOut(500, function() {
        // if we're on the last slide (number 4), start over at number 1
        if (slideNumber == 4) {
            runSlideShow(1);
        }
        // otherwise, just move to the next slide
        else {
            slideNumber++;
            runSlideShow(slideNumber);
        }
    });
}

Any help is much appreciated, thanks!

Answer 1

Instead of using .clearQueue() use .stop(true,true) (ref)

Here is an updated demo.