JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<body>
<div id="pulse-element">Element</div>
</body>
</html>
CSS
#pulse-element {
padding: 5px;
background-color: #f00;
}
JavaScript
$(document).ready(function() {
$.fn.pulseEffect = function(delay, duration) {
var $element, animateOptions;
$element = $(this);
if (!$element.is(":hover")) {
animateOptions = {
opacity: $element.css("opacity") === "1" ? .6 : 1
};
$element.animate(animateOptions, duration);
}
return setTimeout((function() {
return $element.pulseEffect(delay, duration);
}), delay + duration);
};
$("#pulse-element").pulseEffect(0, 1000);
});