如何在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>