如何使用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/