クリックすると 'p'が 'div'に移動します。 - アニメーションが動作しない

Question

これは私の実際のコードのデモですが、問題は同じです。これには他にも良い解決法がありますか？アニメーション（）メソッドが動作していない理由....

$('document').ready(function() { 
 
    $('p').click(function() { 
 
    var x = $('div').offset(); 
 
    $(this).animate({ 
 
     top: $(this).offset({ 
 
     top: x.top, 
 
     left: x.left 
 
     }) 
 
    }, 1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<p style='position:relative;'>Move This</p> 
 

 
<div style='height:100px;width:100px;border:1px solid black;margin-top:200px;'></div>

Answer 1

top: $(this).offset({ top: x.top, left: x.let })が間違って構築され、また間違っています。

ここでは、クローンを含む修正です。私はdivの位置は、絶対にし、この構造は何のdiv

$('document').ready(function() { 
 
    $('p').click(function() { 
 
    var $p = $(this), 
 
     $div = $('div'), 
 
     $pc = $p.clone(), 
 
     x = $div.offset(); 
 
    $pc.insertAfter($p).animate({ 
 
     top: x.top, 
 
     left: x.left 
 
    }, 1000,function() { 
 
     $div.append($pc.css({"position":"static"})) 
 
    }); 
 
    }); 
 
});

.target {position:absolute; top:100px;height:100px;width:100px;border:1px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<p style='position:relative;'>Move This</p> 
 

 
<div class="target"></div>

Answer 2

$('document').ready(function() { 
 
    $('p').click(function() { 
 
    var x = $('div').offset(); 
 
    $(this).animate({ 
 
     top: x.top, 
 
     left: x.left 
 
    }, 1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<p style='position:relative;'>Move This</p> 
 

 
<div style='height:100px;width:100px;border:1px solid black;margin-top:200px;'></div>