How to fire click event after previous execution

Question

I made a slideshow using jquery .animate() function.

I am calling function to animate on clicking next button by using following code:

$(document).ready(function() {
    $("#next").click(function(){next_slide()});
    });

Its working fine but i want that user cannot click on next button until previous animation is completed.

For Example: If user will click on the next button for 10 time in milliseconds then slideshow will keep animating for 10 times.

I want that if first animation is running then if user click even 10 times but function next_slide() will not be called before the previous animation.

Simply i want:

One click= call next_slide() one time

Multiple click in milliseconds = one time

Please tell me how it can be done.

To see code please visit http://jsfiddle.net/77NzW/2/

Best Regards

Answer 1

Then use a flag variable.Make it as true while animating.After completing the animation make it as false.

EXAMPLE CODE:

$(document).ready(function() {
$("#next").click(function(){
 if(flag == false)
  next_slide()}
 );
});

This is not the exact code.Please do some changes like declare variable first...etc

Answer 2

You can simply set a boolean variable var slideOver = true on click of next or previous. and prevent the execution of the code that slides the div if that variable is set.

See the fiddle -: http://jsfiddle.net/77NzW/6/