2

我对 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);
      };               
    });
});
4

1 回答 1

3

您可以声明您的初始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就可以让它看起来居中

于 2013-03-04T16:00:30.140 回答