How to move a div to a certain position on the page using jQuery?
<p>I'm trying to get the red div to come up and sit under the click me link when that link is clicked.</p>

<pre><code>$('.clickMe').click(function() {

    var pos = $(this).offset().top;           

    $('.myDiv').animate({
        marginTop: '-'+pos+'px',
    }, 1000 );       

}); 
</code></pre>

<p></p>

<pre><code>&lt;a href="" class="clickMe"&gt;Click Me&lt;/a&gt;
&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
&lt;div style="position: absolute; border: 1px solid red; height: 50px; width: 50px" class="myDiv"&gt;&lt;/div&gt;
</code></pre>

<p>Here's my failed attempt:</p>

<p><a href="http://jsfiddle.net/SWqmb/4/" rel="nofollow">http://jsfiddle.net/SWqmb/4/</a></p>

<p>How do I get this to work?</p>
