CODEWITHSUNDEEP
jquery
green_arrow
green_arrow

Reputation: 1277

jQuery click function, wait for it to complete before starting again?

At the moment when I double/treble/etc click on the .next button the script is ran, I need it to queue after each other? How can I do this so that the function is completed before starting again?

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'); 
   }
});

Upvotes: 4

Views: 4063

Answers (2)

BLSully
BLSully

Reputation: 5929

If I understand your question properly...you're just trying to prevent animations from stacking on multiple clicks. Use .stop() BEFORE calling your 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'); 
   }
});

Upvotes: 0

Christian
Christian

Reputation: 19740

Similar to Rory's answer, but using the :animated pseudoselector. This prevents the click event from being processed while the element is being animated.

$('.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'); 
   }
});

Upvotes: 3

Related Questions