javascript - 如何在 jQuery 中制作动画时禁用点击？

Question

我试图在列表元素动画时禁用单击，但没有成功。我发现类似 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>