JSFiddle - React, Tailwind, and code Playground

by Emanuel Vecchio

HTML

<div class="round-dot">
    <img  class="round-dot" src="http://placehold.it/22x22"/>
</div>

JavaScript

var st = {};

$('.round-dot').hover(function() {
    console.log("a");
    var dot = $(this).children('img');
    st.finish = false;
    pulseSucka(dot);
  }, function() {
    var dot = $(this).children('img');
    st.finish = true;
    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() {
              if (st.finish) return;
              // Second animate complete
              var f = function() {
                  pulseSucka(dot);
              }
              requestAnimationFrame(f);
        });
    });
}