通过单击另一个按钮撤消按钮动画，但前提是动画已播放

Question

所以我有一个简单的按钮动画。当您单击 button1 时，另一个按钮 (button2) 会出现动画并取而代之，而 button1 会动画消失并隐藏。

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

我简化了代码

JS FIDDLE.

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

谢谢大家！

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>

Css

.wrap{
  width:100%;
  height: 300px;
  background: gray;
}

.btn-wrap{
  position:relative;
  background:green;
  max-width;200px;
  width:200px;
  height:40px;
  overflow:hidden;
  margin:4%;
}
button{
  width:200px;
  height:40px;
  border:0px;
  outline:none;
  color:white;
  font-size:14px;
  font-weight:bold;
  display:inline-block;
  cursor:pointer;
}

.btn1{
  background-color:blue;
}
.btn2{
  background-color:red;
}

.options{
  width:200px;
  height:50px;
  background:white;
  margin:7%;
  border:0px;
  text-indent:20px;
}

JS

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

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

});

Answer 1

据我了解，您所要做的就是创建一个事件来检查 .option 是否被点击。

Demo

JS

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;
})

通过单击另一个按钮撤消按钮动画，但前提是动画已播放

Undo button animation by clicking another button but only if the animation has been played

html

javascript

css

jquery

jsfiddle

JS FIDDLE.