animate jquery working only once

Question

I am trying to use a simple animation feature of jquery. In my application, I have two button " Slide Right" and "Slide Left". When we click on these buttons, these move the box to left or right respectively. My move right button is working perfectly but my move right button is working only once. What's wrong with my code? Here's my code:

$(document).ready(function() {

  $("#slideRightButton").click(function() {
    $("#boxToBeMoved").animate({
      left: '+=10%'
    });
  });

  $("#slideLeftButton").click(function() {
    $("#boxToBeMoved").animate({
      right: '+=10%'
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<button id="slideRightButton">Slide Right</button>
<button id="slideLeftButton">Slide Left</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div id="boxToBeMoved" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

The above code is just an extension of the jquery tutorial by W3Schools which can be found here

Answer 1

You are changing the left and right property of the box, It looks like the right property is taking precedence and preventing the left from doing anything.

If you make both use the same property, one adding to it and the other subtracting, it should work.

$("#slideRightButton").click(function(){
    $("div").animate({left: '+=10%'});
});
$("#slideLeftButton").click(function(){
    $("#boxToBeMoved").animate({left: '-=10%'});
});

Answer 2

Updated to include author's request to not exceed the maximum width.

To accomplish this, I included a wrapper div with a fixed width.

When sliding to the right, it checks if the value will be bigger than parent's width and, if positive, returns.

Same when sliding to the left, but it returns if the value is negative, preventing the box to slide outside the limits of the parent div.

$(document).ready(function() {

  const slideVal = 30; // slide value (in pixels)

  $("#slideRightButton").click(function() {
    var box = $("#boxToBeMoved");
    if (parseInt(box.css("left")) + slideVal > parseInt(box.parent().width())) return;
    box.animate({
      left: '+=' + slideVal
    });
  });

  $("#slideLeftButton").click(function() {
    var box = $("#boxToBeMoved");
    if (parseInt(box.css("left")) - slideVal < 0) return;
    box.animate({
      left: '-=' + slideVal
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<button id="slideRightButton">Slide Right</button>
<button id="slideLeftButton">Slide Left</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div id="wrapper" style="width: 200px">
  <div id="boxToBeMoved" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</div>