Отскок мяча 5 раз Уровень jquery/javascript для начинающих

Question

Я довольно новичок в js и jQuery и хотел достичь простой анимации, которая обсуждалась здесь много раз: прыгающий мяч. Однако я не нашел ответа на свой конкретный вопрос, поскольку обсуждаемые темы уже были намного более сложными.

Я хочу довольно простую анимацию: пять отскоков и пребывание на земле с шестой. Этого я достиг до сих пор. Но для пяти отскоков я хочу уменьшить расстояние отскока на 20% от начального расстояния. Скажем, что расстояние 100, оно должно отскочить до 80 сначала, а затем до 60 ... от 20 до 0.

Вы можете увидеть мои попытки here.

Или просто JS код здесь:

$(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 < bounces; i++){ 
     setTimeout(function(){ 
      bounceDown(); 
      shadowUp();  
     }, time*2*i); 
     setTimeout(function(){ 
      finalDown(); 
      finalShadow(); 
     }, 5000); 
     };    
    }); 
}); 

Answer 1

Вы можете объявить начальное top_bounce значение:

var top_bounce = 100; 

А затем измените bounceUp функцию:

function bounceUp() { 
    $(".ball").animate({top: top_bounce}, time); 
    top_bounce = top_bounce + 20; 
}; 

Как и вы можно увидеть здесь: http://jsfiddle.net/darkajax/5wASf/

А про «бонусной вопрос», упомянутые в свой комментарий, это было бы что-то подобное, объявить переменную как: var shadow_size = 0;, а затем ваша функция, как:

function shadowDown() { 
     console.log(shadow_size); 
     $(".shadow").animate({width: shadow_size*100, height: shadow_size*10, left: 110, top: 225, opacity: 0}, time); 
     shadow_size += 0.2; 

    }; 

Вы можете увидеть скрипку обновляется, и вы 'просто нужно сделать что-то подобное с left, чтобы оно выглядело по центру.