<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--code by newLifeJS-->
<title>Panel</title>
<style type="text/css" media="screen">
.window {
position: fixed;
width: 300px;
height: -webkit-calc(100% - 2px); height: calc(100% - 2px);
top: 0;
right: -200px;
background-color: rgba(0,0,0,0.3);
border: 1px solid black;
border-radius: 10px 0 0 10px;
cursor: pointer;
color: rgba(4,4,4,0.0);
font-size: 100px;
text-align: center;
line-height: 2;
}
</style>
</head>
<body>
<div class="window">Hello</div>
</body>
<script>
$(function() {
$('.window').click(function() {
if ($(this).css('right') !== '0px') {
$(this).animate({'right':'0'}, function(){
$(this).css('color','white');
});
} else {
$(this).css('color','rgba(4,4,4,0.0)').animate({'right':'-200px'});
}
});
});
</script>
</html>