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({
    "left": "830px"
  }, speed, function() {
    bound.css({
      "left": "0"
    });
    $('.play').removeAttr('disabled');
  });
});