JQuery click function, wait for completion to start?

Question

The moment I double / triple / etc. presses the .next button, the script runs, do I need it to queue one after another? How can I do this so that the function is completed before the start?

HTML

<ul id="one" class="first selected"> <li class="pic_one"></li> <li class="pic_two"></li> <li class="pic_three"></li> </ul> <ul id="two"> <li class="pic_one"></li> <li class="pic_two"></li> <li class="pic_three"></li> </ul> <ul id="three" class="last"> <li class="pic_one"></li> <li class="pic_two"></li> <li class="pic_three"></li> </ul> 

JQuery

 $('.slider .next').click(function(){ if($('.slider ul.selected').hasClass('last')){ // leave blank } else { $('.slider ul.selected').hide('slide', { direction: "left" }, 1000); $('.slider ul.selected').removeClass('selected'); $('.slider ul').parent().next('ul').show('slide', { direction: "right" }, 1000).addClass('selected'); } }); 

Answer 1

Like Rory's answer, but using: an animated pseudo selector. This prevents the click event from being processed during element animation.

 $('.slider .next').click(function(){ if($('.slider ul.selected').is(':animated')) return; if($('.slider ul.selected').hasClass('last')){ // leave blank } else { $('.slider ul.selected').hide('slide', { direction: "left" }, 1000); $('.slider ul.selected').removeClass('selected'); $('.slider ul').parent().next('ul').show('slide', { direction: "right" }, 1000).addClass('selected'); } }); 

Answer 2

If I understand your question correctly ... you're just trying to prevent multiple animations from animating. Use .stop() BEFORE calling the next animation.

Example:

 $('.slider .next').click(function(){ if($('.slider ul.selected').hasClass('last')){ // leave blank } else { $('.slider ul.selected').stop().hide('slide', { direction: "left" }, 1000); $('.slider ul.selected').removeClass('selected'); $('.slider ul').parent().next('ul').stop().show('slide', { direction: "right" }, 1000).addClass('selected'); } });