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>