Carrom-Anil D

Intuitive carrom board

by Anil D

HTML

<div class="square-big">
      <div class="square-small"></div>
   </div>

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();
            }
         })
      );
})();