text: <!DOCTYPE html>
  <html>
     <head>
        <meta charset="utf-8" />
        <title>Kepler's dilemma</title>
        <link rel="stylesheet" href="../css/main.css"/>
        <style>
           img
           {
              position: absolute;
           }
  
           img[alt="moon"]
           {
              top: 0;
              left: 0;
           }
  
           img[alt="earth"]
           {
              top: 128px;
              left: 128px;
           }
  
           .box-animation
           {
              position: relative;
           }
  
           button
           {
              display: block;
              margin: auto;
           }
        </style>
     </head>
     <body>
        <p>The output is partially printed on the console</p>
        <button id="button-animate">Animate</button>
  
        <div class="box-animation">
           <img src="images/moon.png" alt="moon"/>
           <img src="images/earth.png" alt="earth"/>
        </div>
  
        <script src="../js/jquery-1.11.3.min.js"></script>
        <script>
           function formatDate(date) {
              return (date.getHours() < 10 ? '0' : '') + date.getHours() +
                      ':' + (date.getMinutes() < 10 ? '0' : '') + date.getMinutes() +
                      ':' + (date.getSeconds() < 10 ? '0' : '') + date.getSeconds() +
                      '.' + (date.getMilliseconds() < 10 ? '00' : (date.getMilliseconds() < 100 ? '0' : '')) +
                      date.getMilliseconds();
           }
  
           $('#button-animate').click(function() {
              var $moonImage = $('img[alt="moon"]');
              console.log('At ' + formatDate(new Date()) + ' 1');
  
              $moonImage.animate({left: '+=256'}, 2500);
              console.log('At ' + formatDate(new Date()) + ' 2');
  
              $moonImage.animate({top: '+=256'}, 2500);
              console.log('At ' + formatDate(new Date()) + ' 3');
  
              $moonImage.animate({left: '-=256'}, 2500);
              console.log('At ' + formatDate(new Date()) + ' 4');
  
              $moonImage.animate({top: '-=256'}, 2500);
              console.log('At ' + formatDate(new Date()) + ' 5');
           });
  
           /* callback alternative
           var $moonImage = $('img[alt="moon"]');
           $('#button-animate').click(function() {
              $moonImage.animate({left: '+=256'}, 2500, function(){
                 $moonImage.animate({top: '+=256'}, 2500, function(){
                    $moonImage.animate({left: '-=256'}, 2500, function(){
                       $moonImage.animate({top: '-=256'}, 2500);
                    });
                 });
              });
           });
           */
        </script>
     </body>
  </html>