JSFiddle - React, Tailwind, and code Playground

by Roman Zharikov

HTML

<div class="animation-box">
  <button class="play2 btn btn-default" style="">Пуск</button>
  <div class="pnl">
    <label for="form-control">Скорость:</label>
    <input class="speed_bg form-control" maxlength="4" type="text" value="1500" />
  </div>
  <div class="pnl-1">
    <label for="form-control">Цвет фона:</label>
    <input class="color_bg form-control" style="" maxlength="6" type="text" value="ffff99" />
  </div>
</div>

CSS

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

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

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

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

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

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

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

JavaScript

$('.play2').on('click', function() {
  $(this).attr('disabled', 'disabled');
  var bg = $(this).parent(),
    speed = $('.speed_bg').val() * 1,
    color = $('.color_bg').val();
  bg.animate({
    "backgroundColor": '#' + color
  }, speed, function() {
    $('.play2').removeAttr('disabled');
  });
});


//--------------- JQuery Color----------------
/*!
 * jQuery Color Animations v@VERSION
 * https://github.com/jquery/jquery-color
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * Date: @DATE
 */
(function(jQuery, undefined) {

  var stepHooks = "backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor",

    // plusequals test for += 100 -= 100
    rplusequals = /^([\-+])=\s*(\d+\.?\d*)/,
    // a set of RE's that can match strings and generate color tuples.
    stringParsers = [{
      re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
      parse: function(execResult) {
        return [
          execResult[1],
          execResult[2],
          execResult[3],
          execResult[4]
        ];
      }
    }, {
      re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,
      parse: function(execResult) {
        return [
          execResult[1] * 2.55,
          execResult[2] * 2.55,
          execResult[3] * 2.55,
          execResult[4]
        ];
      }
    }, {
      // this regex ignores A-F because it's compared against an already lowercased string
      re: /#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,
      parse: function(execResult) {
        return [
          parseInt(execResult[1], 16),
          parseInt(execResult[2], 16),
          parseInt(execResult[3], 16)
        ];
      }
    }, {
      // this regex ignores A-F because it's compared against an already lowercased...