Demo : https://www.lenlop123.com/2020/09/15-animate-left-top-opacity-height.html

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<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>


<input id="btn_animate_left" type="button" value="animate left ++">
<input id="btn_animate_left2" type="button" value="animate left --">
<input id="btn_animate_top" type="button" value="animate top ++">
<input id="btn_animate_top2" type="button" value="animate top --">
<input id="btn_animate_opacity" type="button" value="animate opacity ++">
<input id="btn_animate_opacity2" type="button" value="animate opacity --">
<input id="btn_animate_size" type="button" value="animate height width ++">
<input id="btn_animate_size2" type="button" value="animate  height width --">
<br><br>

<input id="btn_animate_relative" type="button" value="animate relative values">
<input id="btn_animate_defined" type="button" value="animate pre-defined Values">

<div id="div_1" style="background-color: violet;width: 50px;height: 50px;position:absolute;"></div>
<br><br><br><br><br><br>


<script>
  // animate left
  $("#btn_animate_left").click(function () {
    $("#div_1").animate({ left: '250px' });
  });

  $("#btn_animate_left2").click(function () {
    $("#div_1").animate({ left: '-250px' });
  });

  // top
  $("#btn_animate_top").click(function () {
    $("#div_1").animate({ top: '50px' });
  });

  $("#btn_animate_top2").click(function () {
    $("#div_1").animate({ top: '0px' });
  });

  // opacity
  $("#btn_animate_opacity").click(function () {
    $("#div_1").animate({
      opacity: '1',
    });
  });

  $("#btn_animate_opacity2").click(function () {
    $("#div_1").animate({
      opacity: '0.5',
    });
  });

  // height, width
  $("#btn_animate_size").click(function () {
    $("#div_1").animate({
      height: '50px',
      width: '50px'
    });
  });

  $("#btn_animate_size2").click(function () {
    $("#div_1").animate({
      height: '25px',
      width: '25px'
    });
  });
  // relative
  $("#btn_animate_relative").click(function () {
    $("#div_1").animate({
      height: '+=150px',
      width: '+=150px'
    });
  });

  // defined "show", "hide", or "toggle"
  $("#btn_animate_defined").click(function () {
    $("#div_1").animate({
      height: 'toggle'
    });
  });
</script>