JS FIDDLE.

Question

所以我有一个简单的按钮动画。当你点击button1时，另一个按钮（button2）会动画并取代它，button1会被动画化并隐藏起来。

我还在按钮上方有一个下拉选项。当您单击下拉列表时，我需要它来撤消动画（向后再次播放），以便再次显示button1并隐藏按钮2。但是，只有当button2显示时才应该＆＃34;撤消＆＃34;单击下拉列表即可显示动画。

我简化了代码

JS FIDDLE.

我发布了一个similar question但没有回复，因为我太复杂了。我希望通过简化事情可以更清楚，更有帮助。

谢谢你们！

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

通过单击另一个按钮撤消按钮动画，但仅在播放动画时

JS FIDDLE.

1 个答案: