[ 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/