title: Bouncing ball 5 times jquery/javascript beginners level
body: <p>I am quite new to js and jQuery and wanted to achieve a simple animation that has been discussed many times here: a bouncing ball. However, I did not find the answer to my specific question as topics discussed already were much more sophisticated. </p>
  
  <p>I want a quite simple animation: five bounces and stay on the ground with the sixth. That one I have achieved so far. But for the five bounces I want to decrease the distance of bounce by 20% of the initial distance. Say the distance is 100, it should bounce to 80 first then to 60... to 20 to 0.</p>
  
  <p>You can see my attempts <a href="http://jsfiddle.net/sfiddle/2EKCX/1/" rel="nofollow">here</a>.</p>
  
  <p>Or just the js code here:  </p>
  
  <pre><code>$(function() {
  
      var time = 500;
      var bounces = 5;
  
      function bounceDown(){
        $(".ball").animate({top: 200}, time, function(){
          bounceUp();
        });
      };
  
      function bounceUp() {
        $(".ball").animate({top: 100}, time);
      };
  
      function shadowUp(){
        $(".shadow").animate({width: 100, height: 10, left: 85, top: 245, opacity: 1}, time,    
      function(){
          shadowDown();
        });
      };
  
      function shadowDown() {
        $(".shadow").animate({width: 0, height: 0, left: 130, top: 225, opacity: 0}, time);
      };     
  
      function finalDown(){
          $(".ball").animate({top: 200}, time);
      };
  
      function finalShadow(){
          $(".shadow").animate({width: 100, height: 10, left: 85, top: 245, opacity: 1}, time);    
      };
  
      $(".button").on("click", function(){
        for (var i = 0; i &lt; bounces; i++){
          setTimeout(function(){
            bounceDown();
            shadowUp();      
          }, time*2*i);
          setTimeout(function(){
            finalDown();
            finalShadow();
        }, 5000);
        };               
      });
  });
  </code></pre>