Jquery Panel

by Prasad

HTML

<input type="button" id="btnSH" value="Show Panel">
<div class="panel">
Panel Code
<a href="#" class="closeBtn">Close Button</a>
</div>

CSS

@charset "utf-8";
/* CSS Document */
body {
	overflow:hidden;
}
.panel {
	position:absolute;
	right:0;
	z-index:5000;
	width:200px;
	height:150px;
	padding:5px 8px;
	background:#000;
	opacity:0;
	color: #fff;
}
.showPanel {
	animation:aniPanelShow 1s;
	-webkit-animation:aniPanelShow 1s;
	opacity:1;
}
.hidePanel {
	animation:hidePanel 2s;
	-webkit-animation:hidePanel 2s;
	opacity:0;
}
.closeBtn {	
	color: #fff;
	cursor:pointer;
}
@keyframes aniPanelShow {
	from {		
		right:-700px;
		opacity:0;
	}
	to {		
		right:0;
		opacity:1;
	}
}
@-webkit-keyframes aniPanelShow {
	0% {		
		right:-700px;
		opacity:0;
	}
	100% {		
		right:0;
		opacity:1;
	}
}

@keyframes hidePanel {
	0% {		
		right:0;
		opacity:1;
	}
	100% {
		right:-700px;
		opacity:1;
	}
}
@-webkit-keyframes hidePanel {
	0% {		
		right:0;
		opacity:1;
	}
	100% {
		right:-700px;
		opacity:1;
	}
}

JavaScript

$(document).ready(function(){
	$('#btnSH').on('click',function(){
		$('.panel').removeClass('hidePanel').addClass('showPanel');
	});
	$('.closeBtn').on('click',function(){
		$('.panel').removeClass('showPanel').addClass('hidePanel');
	});
});