JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="div-1">DIV-1</div><div id="div-2">DIV-2</div>

CSS

div,
span {
    float: left;
    background: #444;
    color: #fff;
    padding: 6px;
    margin: 40px;
}

JavaScript

(function($) {
  $.fn.hilight = function( options ) {

    var opts = $.extend( {}, $.fn.hilight.defaults, options );

    return this.each(function() {
        
      var obj = $(this),
          objD = obj.data(),
          o = $.extend( {}, opts, objD );
 
        obj.init = function() {
            
            // Makes sure that at this point, we only trigger the
            // eNothing if statements from inside the obj.effects();
            var eNothing = true,
                eMouseenter = false,
                eMouseleave = false;
            
            obj.effects( eNothing, eMouseenter, eMouseleave );
            
            $('*').on('mouseenter mouseleave', function( e ){
                
                // Now we make sure that eNothing is never triggered
                // from within the obj.effects(); and then we define
                // other vars to catch actual events.
                var eNothing = false,
                    eMouseenter = e.type === 'mouseenter',
                    eMouseleave = e.type === 'mouseleave';
            
                obj.effects( eNothing, eMouseenter, eMouseleave );
  
            });
                        
        };
 
        obj.effects = function( eNothing, eMouseenter, eMouseleave ) {
            
            // If statements with eNothing, are triggered on init.
            
            // The reason for why I made it like this, is to group all the different states
            // for easier editing. Escpecially considering the amount of effects I have.
            
            // This way, everything regarding each effect is in a nice 
            // 'little' package and not all around the js file.
            
            var ani1 = {},
                ani2 = {};
            
            obj.slide = function() {
            
                if ( o.slide === 'leftRight' ) {
                    
                    if ( eNothing ) {
                        obj.css({ marginLeft: 60 });
            ...