JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<div id="anim">This is a test</div>

CSS

#anim { padding: 15px; background: yellow; }

JavaScript

var over = false;
$(function() {
  $("#anim").hover(function() {
    over = true;
    grow_anim();
  }, function() {
    over = false;
  });
});

function grow_anim() {
  if (over) {
    $("#anim").animate({paddingLeft: "100px"}, 1000, shrink_anim);
  }
}

function shrink_anim() {
  $("#anim").animate({paddingLeft: "15px"}, 1000, grow_anim);
}