所以我有点卡在我正在做的事情上；
我是 Jquery 和 Javascript 世界的新手，我确信有一种更有效的方法可以做到这一点，但现在，这就是我所拥有的。
基本上，当用户单击“答案”时，页面上的元素会产生动画。如果单击相应的“答案”，则有 2 个具有匹配元素的答案将动画。
现在，当用户多次点击一个答案时，它会继续动画；我需要当用户点击一个答案时，它只动画一次，然后停止，所以用户要么离开它，要么当他们点击另一个“答案”时，它执行动画，但重新绑定到重新点击。有点像在 2 个答案/相应的动画之间来回切换。
我无法重新绑定，因此可以再次单击。有点循环。
希望我可以解释一下！感谢任何可以为我指明正确方向的人。
这是 JS，在我所在的位置下方有一个 FIDDLE。
/*answer1*/
$('ul#quiz li:nth-child(2)').on("click", function() {
$(this).addClass('active');
$(this).siblings().addClass('deactive');
$(this).siblings().removeClass('active');
$(this).removeClass('deactive');
if ($('ul#quiz li:nth-child(3)').hasClass('deactive')) {
$('.circle2').animate({
width: "80px",
height: "80px"
});
}
if ($(this).hasClass('active')) {
$('.circle1').animate({
width: "+=3.5%",
height: "+=3.5%"
});
}
});
/*answer2*/
$('ul#quiz li:nth-child(3)').on("click", function() {
$(this).addClass('active');
$(this).siblings().addClass('deactive');
$(this).siblings().removeClass('active');
$(this).removeClass('deactive');
if ($('ul#quiz li:nth-child(2)').hasClass('deactive')) {
$('.circle1').animate({
width: "80px",
height: "80px"
});
}
if ($(this).hasClass('active')) {
$('.circle2').animate({
width: "+=3.5%",
height: "+=3.5%"
});
}
});