javascript - 无法反转 Jquery 动画

Question

所以我刚刚开始学习 Javascript 并学习 Jquery 库，我有一个用 CSS 创建的简单框，并使用 Jquery 对其进行动画处理，当单击一个按钮时，该框会变大，但当单击另一个按钮时，它会返回恢复到原来的大小。 我有使盒子变大的按钮，可以正常工作，但我似乎无法让按钮变小，以实际使其变小。

$(".big").click(function() {
  $(".box1").animate({
    height: '+=150px',

  });
});

$(".small").click(function() {
  $(".box1").animate({
    width: '-=150px;'
  });
});

.box1 {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='box1'></div>
<button type='button' class='big'>big</button>
<button type='button' class='small'>small</button>

我不明白为什么它不起作用，如果这是一个愚蠢的问题，我很抱歉。

Answer 1

它不起作用的原因是您在 height: '-=150px;' 中添加了 ;

如果你删除它，它就可以正常工作。

演示

$(".big").click(function() {
  $(".box1").animate({
    height: '+=150px',

  });
});

$(".small").click(function() {
  $(".box1").animate({
    height: '-=150px'
  });
});

.box1{
width:10px;
height:10px;
background-color:blue}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="small">small</div>
<div class="big">big</div>
<div class="box1"></div>