JSFiddle - React, Tailwind, and code Playground

by Emanuel Vecchio

HTML

<div class="rount-dot">
    <img src="http://placehold.it/100x100"/>
</div>

JavaScript

$('.round-dot').hover(function() {
    var dot = $(this).children('img');
    pulseSucka(dot);
  }, function() {
    var dot = $(this).children('img');
    dot.finish();
  }
);

function pulseSucka(dot){
    $(dot).animate({
        height: '24',
        width: '24',
        paddingLeft: '0',
        paddingTop: '0'
      }, 300, function() {
        // First animate complete
        $(dot).animate({
          height: '18',
            width: '18',
            paddingLeft: '3',
            paddingTop: '3'
          }, 300, function() {
             // Second animate complete
              var f = function() {
                  pulseSucka(dot);
              }
              requestAnimationFrame(f);
        });
    });
}