Javascript 通过单击其他按钮撤消按钮动画，但仅当动画已播放时

所以我有一个简单的按钮动画。单击button1时，另一个按钮（button2）将在中设置动画并取代其位置，button1将设置动画并隐藏

我在按钮上方还有一个下拉选择。单击下拉列表时，我需要它撤消动画（再次向后播放），以便按钮1再次显示，按钮2隐藏。但只有在显示button2时，才应通过单击下拉菜单“撤消”动画

我简化了代码

我发了一个帖子，但没有得到回复，因为我把它弄得太复杂了。我希望这是更清楚的，并有助于简化事情

谢谢大家

Html

<div class="wrap">
  <select class="options">
    <option value="option1">Volvo</option>
    <option value="option2">Saab</option>
    <option value="option3">Fiat</option>
  </select>

  <div class="btn-wrap">
    <button class="btn1">
     Add to cart
    </button>
    <button class="btn2">
     Checkout
    </button>
  </div>

</div>

JS

$(".btn-wrap").click(function() {

  $('.btn1').css('position', 'relative').animate ( { top:'-40px' }  );
  $('.btn2').css('position', 'relative').animate ( { top:'-40px' }  );

});

---

据我所知，您所要做的就是创建一个事件，检查是否单击了

。选项


JS

“我发布了一个类似的问题，但没有得到回复，因为我把问题弄得太复杂了。我希望这更清楚。”--为什么不简单地编辑这个问题，让它更清楚？因为如果我编辑一天前被问到的问题，没有人会知道我编辑了它，也不会引起任何注意。另外，在我的旧帖子中添加这些额外的信息只会让我的旧帖子变得特别大，吓跑任何人。这不是同一个问题，但会为我解决这两个问题。是的，我想我需要“如果”的陈述。我现在遇到的问题是，我想我需要按钮动画仍然工作，即使它被重置点击下拉菜单。非常感谢！这太完美了。
$(".btn-wrap").click(function() {

  $('.btn1').css('position', 'relative').animate ( { top:'-40px' }  );
  $('.btn2').css('position', 'relative').animate ( { top:'-40px' }  );

});

let undo = false;

$(".btn-wrap").click(function() {
    if(undo == false) {
        $('.btn1').css('position', 'relative').animate ( { top:'-40px' }  );
        $('.btn2').css('position', 'relative').animate ( { top:'-40px' }  );

        undo = true;
    }
});

$(".options").on("click", function() {
    $('.btn1').css('position', 'relative').animate ( { top:'0px' }  );
    $('.btn2').css('position', 'relative').animate ( { top:'20px' }  );

    undo = false;
})