JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text "class="try" value="value"/><br/>
<input type="button" class="fire" value="Fire Animation"/>
CSS
.try{
border:1px solid #a6caf0;
}
JavaScript
jQuery.fn.shake = function(intShakes, intDistance, intDuration,callback) {
this.each(function() {
$(this).css("position","relative");
for (var x=1; x<=intShakes; x++) {
$(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
.animate({left:intDistance}, ((intDuration/intShakes)/2))
.animate({left:0}, (((intDuration/intShakes)/4)));
}
});
var _callback = callback;
setTimeout(function(){
if(_callback)
_callback();
}, intDuration);
return this;
};
$('.fire').click(function(){
$elem = $('.try');
$elem.css('borderColor','red');
$elem.shake(5,10,500,function(){
$elem.css('borderColor','#a6caf0');
});
});