弹跳球5次jquery / javascript初学者级别

我是js和jQuery的新手，想要实现一个简单的动画，这里曾多次讨论过：一个弹跳球。 但是，我没有找到我的具体问题的答案，因为已经讨论的主题已经变得更加复杂。

我想要一个非常简单的动画：五次弹跳并留在地面上，第六次。 到目前为止我所取得的成就。 但是对于五次弹跳我想要将弹跳距离减少20％的初始距离。 假设距离为100，它应首先弹回80到60 …到20到0。

你可以在这里看到我的尝试。

或者只是这里的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如下：

 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类似的东西让它看起来居中