JSFiddle - React, Tailwind, and code Playground

by javajack

HTML

<div id="flyout">hi!</div>

CSS

#flyout {
    width: 350px;
    height: 350px;
    background-color: lightgray;
}

JavaScript

$.fn.flyout = function(options) {
    var el = this;
    var edge = options.edge || 30;
    el.css({
        position : "absolute",
        top : "30px",
        left : -1 * (el.width() - edge)
    });
    el.hover(function () {
        $(this).animate({left : "0px"}); 
    });
    el.mouseleave(function () {
        $(this).animate({left : -1 * (el.width() - edge) });
    });
}

    $("#flyout").flyout({"edge" : "30"});