弹跳球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); }; }); });
您可以声明初始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
类似的东西让它看起来居中