AnimationOnMouseenter.js

(function ($) {

  var AnimatedEl = (function(){
  
      var AnimatedEl = function (o) {
  
          this.el = $(o.el);
          this.animationType = $(o.el).data('action');
          this.checkInterval = o.checkInterval;
          this.timeout = null;
  
          this.init();
      };
  
      AnimatedEl.prototype.init = function () {
  
          this.setupListeners();
  
      };
  
      AnimatedEl.prototype.setupListeners = function () {
          var self = this;
  
          self.el.on('mouseenter', function () {
  
              self.run($(this));
  
          }).on('mouseleave', function () {
  
              clearInterval(self.timeout)
  
          });
      };
  
      AnimatedEl.prototype.run = function (el) {
  
          var self = this;
  
          this.timeout = setInterval(function () {
  
              el.addClass(self.animationType);
  
          }, self.checkInterval);
  
          el.on("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd", function(e){
  
              self.stop(el);
  
          });
  
      };
  
      AnimatedEl.prototype.stop = function (el) {
  
          el.removeClass(this.animationType);
  
      };
  
      return AnimatedEl;
  
  })();
  
  
  $.each($('.js-anim-el'), function (i, el) {
  
      new AnimatedEl({
          el: el,
          checkInterval: 200
      });
  
  })

})(jQuery);