How to disable click while animating in jQuery?

Question

I'm trying to disable click while an list element is animated but with no success. I've found posts like this, this or this and others on SO, followed their examples, but nothing seems to work. Can anyone help me with this please?

My code:

var animateStatus = false;
 $('li').on('click', function(){
  animateStatus = true;
   $('li.active').animate({ 'top': '0px' }, 300, function(){ animateStatus = false; });
   $('li.active').removeClass('active');
   $(this).addClass('active');
   $(this).animate({ 'top': '-5px' }, 300, function(){ animateStatus = false; });
 });

ul{
    display: inline-block;
 vertical-align: middle;
    height: 300px;
}
li{
  position: relative;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>    
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
</ul>

you can simply use a flag and test it. On click, if no 'li' is animating (flag false), animate it and position the flag to true. When animation is complete, position the flag to false. This way, only one animation at a time can occur. — TCHdvlp, Mar 10 '16 at 15:23
@KyleM, the code works partially well, the next click should work only after the animation has finished. — Ionut Necula, Mar 10 '16 at 15:25
https://jsfiddle.net/TCHdevlp/tzmf2311/ I lightened it up. The 'flag' I mentionned already exists, it's the `active` class. Here is the asynchronous version (I preffer this one) https://jsfiddle.net/TCHdevlp/tzmf2311/1/ — TCHdvlp, Mar 10 '16 at 15:33

jacksbox · Accepted Answer · 2016-03-10T16:12:44.553

is this your desired behaviour?

var animateStatus = false;
 $('li').on('click', function(){
        if(animateStatus) return;
  animateStatus = true;
   $('li.active').animate({ 'top': '0px' }, 300);
   $('li.active').removeClass('active');
   $(this).addClass('active');
   $(this).animate({ 'top': '-5px' }, 300, function(){ animateStatus = false; });
 });

ul{
    display: inline-block;
 vertical-align: middle;
    height: 300px;
}
li{
  position: relative;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>    
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
</ul>

Partially, now the click does not work on the active class when animating. I need the same thing for all list items. — Ionut Necula, Mar 10 '16 at 15:59

How to disable click while animating in jQuery?

1 Answers1