JSFiddle - React, Tailwind, and code Playground

by deadlyicon

HTML

<div>
    awe yeah!
</div>

CSS

body{
    padding: 50px
}

div{
    height: 150px;
    width: 200px;
    background: red;
}

JavaScript

jQuery.fn.hoverAround = function(radius, duration) {

  var self = this, pi2 = (2*Math.PI);
  self.css({position:'relative', nothing:0});
  self.animate({nothing: 1}, {
    duration: duration,
    easing: 'linear',
    step: function(p) {
      var
        t = p*pi2,
        x = radius * Math.cos(t),
        y = radius * Math.sin(t);
      self.css({left:x+'px', top:y+'px'});
    },
    complete: function() {
      self.hoverAround(radius, duration);
    }
  });
  return self;
};

$('div').hoverAround(10, 1000);