JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<script src="http://code.jquery.com/jquery-git1.js"></script>
  <title>Creating infinite animations with jQuery's animate()</title>
</head>
<body>
   <div class="square-big">
      <div class="square-small"></div>
   </div>
</body>

CSS

.square-big
{
   width: 300px;
   height: 300px;
   display: block;
   position: relative;
   border: 1px solid black;
   margin: 20px 0;
}

.square-small
{
   display: block;
   width: 20px;
   height: 20px;
   position: absolute;
   background-color: red;
}

JavaScript

(function animation() {
   var options = {
      duration: 800,
      easing: 'linear'
   };

   $('.square-big')
      .find('.square-small')
      .animate({
            left: 280,
            top: 280
         },
         options
      )
      .animate({
            left: 0,
         },
         options
      )
      .animate({
            left: 280,
            top: 0,
         },
         options
      )
      .animate({
            left: 0,
         },
         $.extend(true, {}, options, {
            complete: function() {
               animation();
            }
         })
      );
})();