Невозможно отменить анимацию 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>