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> 

Answer 1

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>