JSFiddle - React, Tailwind, and code Playground

by Roman Zharikov

HTML

<div class="animation-box">
  <button class="play btn btn-default">
    Пуск
  </button>
  <span class="test_bound"></span>
  <div class="pnl">
    <label for="form-control">Скорость:</label>
    <input class="speed_bound form-control" maxlength="4" type="text" value="1500" />
  </div>
</div>

CSS

.animation-box {
  position: relative;
  margin: 15px 10px 50px 15px;
  padding: 10px;
  border: 1px solid #ccc;
  min-height: 250px;
  overflow: hidden;
}

.play {
  width: 47px;
  outline: none;
  position: absolute;
  top: 15px;
  right: 35px;
}

.test_bound {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 100px;
  left: 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: darkorange;
}

.pnl {
  position: absolute;
  bottom: 3px;
  left: 3px;
  width: 225px;
}

.pnl>label {
  margin-top: 6px;
}

.speed_bound {
  width: 150px;
  float: right;
}

JavaScript

// движение шарика по кривой

$('.play').on('click', function() {
  $(this).attr('disabled', 'disabled');
  var bound = $('.test_bound'),
    speed = $('.speed_bound').val() * 1;
  bound.animate({
    "top": "0",
    "left": "100px"
  }, speed, function() {
    bound.animate({
      "top": "100px",
      "left": "200px"
    }, speed, function() {
      bound.animate({
        "top": "200px",
        "left": "300px"
      }, speed, function() {
        bound.animate({
          "top": "100px",
          "left": "400px"
        }, speed, function() {
          bound.animate({
            "top": "0",
            "left": "500px"
          }, speed, function() {
            bound.animate({
              "top": "100px",
              "left": "600px"
            }, speed, function() {
              bound.css({
                "left": "0"
              });
              $('.play').removeAttr('disabled');
            });
          });
        });
      });
    });
  });
});