JQuery «animate» перестает работать после 2 звонков

Question

У меня есть несколько очень простых jquery, которые перемещают <div> (прямоугольник) влево и вправо при нажатии соответствующей кнопки. Однако после одного или двух щелчков <div> перестает двигаться:

Что происходит?

$(document).ready(function() {
  $("#btn1").click(function() {
    $("#box").animate({
      right: "100px"
    });
  });
  
  $("#btn2").click(function() {
    $("#box").animate({
      left: "100px"
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<button id="btn1">Animate right</button>
<button id="btn2">Animate left</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;position:relative;"></div>

Answer 1

Проблема в том, что вы никогда не сбрасываете значения right или left до значений по умолчанию. Вы можете достичь этого, используя css():

$(document).ready(function() {
  $("#btn1").click(function() {
    $("#box").animate({
      right: "100px"
    }).css('left', 'auto');
  });

  $("#btn2").click(function() {
    $("#box").animate({
      left: "100px"
    }).css('right', 'auto')
  });
});

#box {
  background: #98bf21;
  height: 100px;
  width: 100px;
  margin: 6px;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<button id="btn1">Animate right</button>
<button id="btn2">Animate left</button>
<div id="box"></div>