单击时将 '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

$('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>

Answer 2

top: $(this).offset({ top: x.top, left: x.let }) 是一个不正确的结构，而且拼写错误。

这是包括克隆在内的更正。请注意，我必须使 div 位置成为绝对位置，并在动画后将 p 从 relative 更改为 static 以将 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>

单击时将 'p' 移动到 'div'。 - 动画不工作

Move 'p' into 'div' when clicked. - animation isn't working

jquery

jquery-animate