jQuery info admin with bounce efect

by Mas Aab

HTML

<div id='info'>
    <h1>Welcome</h1>
    dibulan suci ramadah ini saya Mohon maaf lahir dan batin
<a class='close' href='#'>&#215;</a>
</div>
<button class="open">info</button>

CSS

body {padding:30px;background-color:lavender;}

#info {
  position:fixed !important;
  position:absolute; /* IE6 */
  top:-1000px;
  left:50%;
  margin:0px 0px 0px -182px;
  width:300px;
  height:auto;
  padding:16px;
  background:#ddd;
  border:2px solid #7272DF;
  font:normal 1em Cambria,Georgia,Serif;
  color:#111;
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}

#info a.close {
  position:absolute;
  top:-10px;
  right:-10px;
  background:#333;
  font:bold 16px Arial,Sans-Serif;
  text-decoration:none;
  line-height:15px;
  width:15px;
  text-align:center;
  color:#fff;
  border:2px solid #fff;
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  border-radius:22px;
  cursor:pointer;
}

JavaScript

$(function() {
    $('.open').click(function() {
        $('#info').animate({top:"50px"}, 1500,'easeOutBounce');
        return false;
    });
    $('.close').click(function() {
        $(this).parent().animate({top:"-1000px"}, 1000);
        return false;
    });
});