如何使用jQuery将div移动到页面上的某个位置？

Question

当点击该链接时，我正试图让红色div出现并坐在click me链接下。

$('.clickMe').click(function() {

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

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

}); 

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

这是我失败的尝试：

http://jsfiddle.net/SWqmb/4/

如何让它发挥作用？

Answer 1

尝试这样做，动画top属性可能是更好的选择，负边距可能会产生不良影响：

$('.clickMe').click(function(e) {

    e.preventDefault();

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

    $('.myDiv').animate({
        top: pos + $(this).height()
    }, 1000 );

});   

演示：http://jsfiddle.net/SWqmb/6/

Answer 2

这应该有效。 http://jsfiddle.net/SWqmb/8/

但我认为这不是最好的方法。