Question

Hi
I am creating a simple slide show with next / prev buttons. When you get to the last one it whizzes back to the first one. However, if a user goes click crazy and clicks next before the last (ie 3rd) image has finished coming in then the animation is triggered again and things move the wrong way.

http://www.ee-web.co.uk/demos/en2krewScroller.html

I was wondering how do I stop the animations queing up. Kind of like disabling the “Next” button whilst the animation is happening or stopping the animation from adding to a queue if one is already going on. Here’s part of my jQuery:

function moveSlide(wod, pxTM, btnClicked) {
    if (pxTM > 0) { // then its a one step move
        $('#slideShowInner').animate({
            'left': '-=' + wod
        }, 'slow');
    }
    if (pxTM == 0 && btnClicked == "clickNext") {
        $('#slideShowInner').animate({
            'left': 0
        }, 'slow');
    }
}

I have tried various .stop() and ‘queue’:’stop’ but nothing seems to work.

Answer 1

You can check if the element’s animation queue has any element, and if it has none, you slide it.