JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<div class="facebook_right">
    <div id="facebook_icon"></div>
    <div class="facebook_box">
        <fb:fan profile_id="201941943231818" stream="0" connections="16" logobar="0" width="237" height="389"></fb:fan>
    </div>
</div>

CSS

.facebook_left {
    width: 245px;
    height: 389px;
    position: fixed;
    left: -245px;
    top: 220px;
    z-index: 99997;
}
.facebook_right {
    width: 245px;
    height: 389px;
    position: fixed;
    right: -245px;
    top: 220px;
    z-index: 99997;
}
.facebook_left #facebook_icon {
    float: right;
    height: 60px;
    width: 34px;
    right: -34px;
    background: url("http://w3lessons.info/demo/sliding-facebook-likebox/fb.png") no-repeat;
    cursor: pointer;
    position: relative;
    z-index: 99998;
}
.facebook_right #facebook_icon {
    float: left;
    height: 60px;
    width: 34px;
    left: -34px;
    background: url("http://w3lessons.info/demo/sliding-facebook-likebox/fb.png") no-repeat;
    cursor: pointer;
    position: relative;
    z-index: 99998;
}
.facebook_right .facebook_box {
    background-color: #FFFFFF;
    border: 4px solid #3B5998;
    float: right;
    top: -60px;
    position: relative;
    z-index: 99999;
}
.facebook_left .facebook_box {
    background-color: #FFFFFF;
    border: 4px solid #3B5998;
    float: left;
    top: -60px;
    position: relative;
    z-index: 99999;
}

JavaScript

$(function () {
    $(".facebook_right").hover(function () {
        $(".facebook_right").stop(true, false).animate({
            right: "0"
        }, 800, 'easeOutQuint');
    }, function () {
        $(".facebook_right").stop(true, false).animate({
            right: "-245"
        }, 800, 'easeInQuint');
    }, 1000);
});
$(function () {
    $(".facebook_left").hover(function () {
        $(".facebook_left").stop(true, false).animate({
            left: "0"
        }, 800, 'easeOutQuint');
    }, function () {
        $(".facebook_left").stop(true, false).animate({
            left: "-245"
        }, 800, 'easeInQuint');
    }, 1000);
});