jQuery动画时如何禁用单击？

Question

我试图在列表元素设置为动画但不成功的同时禁用单击。 我在SO上找到了类似this ， this或this以及其他文章的帖子，跟随他们的例子，但似乎没有任何效果。 有人可以帮我吗？

我的代码：

 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

这是您想要的行为吗？

 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>