弹跳球5次jquery/javascript初学者级别 [英] Bouncing ball 5 times jquery/javascript beginners level

问题描述

我对js和jQuery还是很陌生，想实现一个简单的动画，在这里已经讨论了很多次:弹跳球.但是，由于已经讨论的主题更加复杂，因此我没有找到针对我的特定问题的答案.

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.

我想要一个非常简单的动画:五次弹跳，第六次弹跳.到目前为止，我已经实现了这一目标.但是对于五次弹跳，我想将弹跳距离减少初始距离的20％.假设距离是100，应该先反弹到80，然后反弹到60 ...再到20到0.

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.

您可以在此处看到我的尝试.

You can see my attempts here.

或者只是这里的js代码:

Or just the js code here:

$(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值:

You can declare your initial top_bounce value:

var top_bounce = 100;

然后将您的bounceUp函数更改为:

And then change your bounceUp function to:

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

就像您可以在这里看到的一样: http://jsfiddle.net/darkajax/5wASf/

Like you can see here: http://jsfiddle.net/darkajax/5wASf/

关于您的注释中提到的奖励问题"，这有点类似，先声明一个变量，例如:var shadow_size = 0;然后是您的函数，例如:

And about the "bonus question" mentioned in your comment, it'd be something similar, declare a variable like: var shadow_size = 0; and then your function like:

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类似的操作，以使其看起来居中

You can see the fiddle updated, also you'd just have to do something similar with left to make it look centered

这篇关于弹跳球5次jquery/javascript初学者级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！