JSFiddle - React, Tailwind, and code Playground

by pioul

HTML

<p>lorem ipohfus dofuo sdhfuohs ufuohsduhfsudhfsui lorem ipohfus dofuo sdhfuohs ufuohsduhfsudhfsui lorem ipohfus dofuo sdhfuohs ufuohsduhfsudhfsui lorem ipohfus dofuo sdhfuohs ufuohsduhfsudhfsui </p>

CSS

p {
    display: block;
    width: 200px;
    margin-top: 50px;
    height: 150px;
    background: #000;
}

JavaScript

(function($){
    $.fn.slideitlight = function(options){
        options = $.extend({}, $.fn.slideitlight.defaultOptions, options);
        
        if(options.event != 'mouseover' && options.event != 'click' && options.event != 'mouseenter'){
            options.event = 'mouseover';
        }
        
        if(options.event == 'click'){
            options.eventGoForth = options.event;
            options.eventGoBack = options.event;
        } else if(options.event == 'mouseenter'){
            options.eventGoForth = options.event;
            options.eventGoBack = 'mouseleave';
        } else {
            options.eventGoForth = 'mouseover';
            options.eventGoBack = 'mouseout';
        }
        
        $(this).each(function(){
            
            options.from = $(this);
            if(options.to == null){
                options.to = options.from.clone();
            }
            options.from.after(options.to);
            options.to.css({ display: 'none', position: 'absolute', top: '0px', left: '0px' });
            options.from.css({ position: 'absolute', top: '0px', left: '0px' });
            
            var sil = {
                from: $(this),
                fromWidth: $(this).outerWidth() +'px',
                fromHeight: $(this).outerHeight() +'px',
                to: options.to,
                toWidth: options.to.outerWidth() +'px',
                toHeight: options.to.outerHeight() +'px',
                eventGoForth: options.eventGoForth,
                eventGoBack: options.eventGoBack,
                animSpeed: options.animSpeed,
                onChange: options.onChange,
                onSlidedForth: options.onSlidedForth,
                onSlidedBack: options.onSlidedBack,
                slideForth: function(){
                    console.log(1);
                    this.from.fadeTo(animSpeed, 0);
                    this.to.css({ 'margin-top': this.fromHeight }).animate({ 'margin-top': '0px' }, animSpeed);
          ...