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); });