HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate relative left</title>
  <style>
    body { font-family: sans-serif; padding: 16px; min-height: 200px; }
    .block {
      position: absolute;
      background-color: #abc;
      left: 50px;
      top: 60px;
      width: 90px;
      height: 90px;
      margin: 5px;
    }
    button { margin-right: 8px; padding: 8px 16px; }
    #hint { margin-top: 160px; color: #64748b; }
  </style>
</head>
<body>
  <button type="button" id="left">&laquo;</button>
  <button type="button" id="right">&raquo;</button>
  <div class="block"></div>
  <p id="hint">Click arrows — each move queues on fx.</p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#right").on("click", function () {
      $(".block").animate({ left: "+=50px" }, "slow");
    });
    $("#left").on("click", function () {
      $(".block").animate({ left: "-=50px" }, "slow");
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .animate() — relative left +=/-= (Try It)