Offset + Animate

by gsguma

HTML

<!DOCTYPE html>
<html>
<head>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>Gsguma - Testes</title>
    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <a id="hello">Testar</a>
    <div id="div"></div>
</body>
</html>

CSS

a {
    background: #eee;
    cursor:pointer;
    display:block;
    float:left;
    margin: 100px;
    padding:10px;
}
div{
    position:absolute;
    height:50px;
    width:150px;
    background:red;
    display:none;
    opacity:.8;
}

JavaScript

$('#hello').click(function(e) {
    e.preventDefault();
    var w = $('#div').width();
    
    $('#div').show();
    $('#div').animate({
        left: $('#hello').offset().left,
        top: $('#hello').offset().top - w;
    });
});