JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fb" class="fb" style="left: -258px; width: 310px; position: fixed; top: 125px;
background:url(http://www.pong-lenis-esports.de/include/images/tsslider/fb.png) repeat scroll 100% 0% transparent; height: 42px; z-index: 999;">
    <div style="position:absolute;top:20pt;right:46pt;width:190px;height:40px;overflow: hidden;"></div>
</div>
<div style="left: -258px; width: 304px; position: fixed; top: 170px;
background:url(http://www.pong-lenis-esports.de/include/images/tsslider/steam.png) repeat scroll 100% 0% transparent; height: 42px; z-index: 999;" class="Steam" id="Steam">
    <div style="position:absolute;top:20pt;right:46pt;width:182px;height:40px;overflow: hidden;"></div>
</div>

JavaScript

var initSlider = function (selector, minWidth, maxWidth) {
    var element = $(selector),
        state = 0,
        running = false,
        i = 0,
        slideOut = function () {
            if (state === 0) {
                element.animate({
                    width: maxWidth
                }, 'slow');
                state = 1;
            }
        },
        slideBack = function () {
            if (state === 1 && false === running) {
                running = true;
                element.animate({
                    width: minWidth
                }, {
                    duration: 'slow',
                    always: function () {
                        state = 0;
                        running = false;
                    }
                });
            }
        };

    element.hover(slideOut, slideBack);
};

initSlider('#fb', 308, 521);
initSlider('#Steam', 308, 521);