How to animate a div in a loop using jquery

April 25, 2022

I am practicing jquery and trying to animate a div in all direction by pressing the animate button(once). The code works fine for moving the div to right and bottom, but not working for moving the div to left and upwards.

This is the code I have written so far

$(document).ready(function() {
  $("button").click(function() {
    for (var i = 0; i < 4; i++) {
      if (i == 0) {
        $("div").animate({
          left: '250px'
        });
      }
      if (i == 1) {
        $("div").animate({
          top: '250px'
        });
      }
      if (i == 2) {
        $("div").animate({
          left: '-250px'
        });
      }
      if (i == 3) {
        $("div").animate({
          top: '-250px'
        });
      }
    }
  });
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <title>Lab 8</title>
</head>

<body>

  <button>Start Animation</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 style="background:#98bf21;height:100px;width:100px;position:absolute;">I am a box</div>

</body>

</html>

>Solution :

When you set negative values for the left and top, they move the box out of the viewport, since it is absolutely positioned w.r.t. the body. Set them to 0px in the 3rd and 3th interations.

You can add a parent with position: relative; to better observe the animation (view in full-page mode):

$(document).ready(function() {
  $("button").click(function() {
    for (var i = 0; i < 4; i++) {
      if (i == 0) {
        $("div").animate({
          left: '250px'
        });
      }
      if (i == 1) {
        $("div").animate({
          top: '250px'
        });
      }
      if (i == 2) {
        $("div").animate({
          left: '0px' // Back to original position left
        });
      }
      if (i == 3) {
        $("div").animate({
          top: '0px' // Back to original position top
        });
      }
    }
  });
});

.parent {
  position: relative;
}

.box {
  position: absolute;
  background: #98bf21;
  height: 100px;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button>Start Animation</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 class="parent">
  <div class="box">I am a box</div>
</div>