jquery - 更改大于或小于给定值的值在 jQuery 中不起作用？

Question

首先，这不是一个新问题——我只是在引用 Stack Overflow 上已经提出的另一个问题:

Bouncing ball 5 times jquery/javascript beginners level

在那个问题中，动画在弹跳 5 次时运行良好，但当我尝试弹跳超过 5 次或少于 5 次时，似乎无法正常工作。

在紧急情况下，这里是片段:

$(function() {

  var time = 500;
  var bounces = 8;
  var top_bounce = 20;

  function bounceDown() {
    $("#ball").animate({
      left: 10,
      top: 100
    }, time, function() {
      bounceUp();
    });
  };

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

  function shadowUp() {
    $("#shadow").animate({
        width: 100,
        height: 5,
        left: 10,
        top: 200,
        opacity: 1
      }, time,
      function() {
        shadowDown();
      });
  };

  function shadowDown() {
    $("#shadow").animate({
      width: 0,
      height: 0,
      left: 15,
      top: 200,
      opacity: 0
    }, time);
  };

  function finalDown() {
    $("#ball").animate({
      left: 10,
      top: 100
    }, time);
  };

  function finalShadow() {
    $("#shadow").animate({
      width: 100,
      height: 5,
      left: 10,
      top: 200,
      opacity: 1
    }, time);
  };

  $('#Get').click(function() {
    for (var i = 0; i < bounces; i++) {
      setTimeout(function() {
        bounceDown();
        shadowUp();
      }, time * 2 * i);
      setTimeout(function() {
        finalDown();
        finalShadow();
      }, 5000);
    };
  });
});

body {
  background-color: black;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#container {
  position: absolute;
  left: 50%;
  width: 500px;
  height: 700px;
}
#ball {
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: #e65454;
  border-radius: 50%;
}
#shadow {
  position: absolute;
  height: 5px;
  width: 100px;
  background: radial-gradient(ellipse at center, rgba(91, 91, 91, 1) 0%, rgba(142, 142, 142, 0.84) 16%, rgba(227, 228, 229, 0) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5b5b5b', endColorstr='#00e3e4e5', GradientType=1);
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<button id="Get">Set</button>

<div id="container">
  <div id="ball"></div>
  <div id="shadow"></div>
</div>

Answer 1

你必须:

1. 增加弹跳
2. 减少top_bounce，这样球就不会太快地粘在底部
3. 增加 setTimeout 中的时间，这样球就有时间完成弹跳

DEMO