jquery - 单击时将 'p' 移至 'div'。 - 动画不起作用

Question

这只是我真实代码的演示，但问题是一样的。有没有其他或更好的解决方案。为什么 animate() 方法不起作用......

$('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 位置设置为绝对位置，并在动画之后将 p 从相对位置更改为静态位置，以将 p 插入到 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>