title: How to animate a div in a loop using jquery
body: <p>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.</p>
  <p>This is the code I have written so far</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("button").click(function() {
      for (var i = 0; i &lt; 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'
          });
        }
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;title&gt;Lab 8&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;button&gt;Start Animation&lt;/button&gt;
  
    &lt;p&gt;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!&lt;/p&gt;
  
    &lt;div style="background:#98bf21;height:100px;width:100px;position:absolute;"&gt;I am a box&lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>