[ Make animate finish before enabling click again ]

I have groups of 3 li items sliding in each on their own, with a small delay on each. I want NOTHING to happen if next button is clicked, but the 3 lis are already animating.

// when next is clicked
    $('.sh > .next').click(function() {

// slide in the individual lis
            $('div.active li').eq(0).animate({
                'left': 0,
                'right': 'auto'
            });
            $('div.active li').eq(1).delay(600).animate({
                'left': 100,
                'right': 'auto'
            });
            $('div.active li').eq(2).delay(1200).animate({
                'left': 200,
                'right': 'auto'
            });

});

Answer 1

Add a flag that is set to true if the animation is going on.

    var animating = false;
    var animationTime = 1800;  // Stores the duration of the animation

    $('.sh > .next').click(function() {
        if(!animating) {
            animating = true;
            $('div.active li').eq(0).animate({
                'left': 0,
                'right': 'auto'
            });
            $('div.active li').eq(1).delay(600).animate({
                'left': 100,
                'right': 'auto'
            });
            $('div.active li').eq(2).delay(1200).animate({
                'left': 200,
                'right': 'auto'
            });

            // Reset the flag, once the animation is complete.
            // This can also be done in a callback of the last animate().
            setTimeout(function() { 
                animating = false;
            }, animationTime);
       }
});

Here's an example: http://jsfiddle.net/FJd9Q/2/