Javascript 如何通过动画将一个div移动到另一个div

我有这种html结构：

<div id="block-1"></div>

   <div id="parent-block">
      <div id="block-2"></div>
        <button>Move block</button>
   </div>

移动块

#block-1浮动到屏幕右上角

#父块浮动在屏幕左下角

我知道我可以使用事件对象获取块的坐标，但如何在不依赖屏幕大小的情况下，通过平滑动画将#block-2移动到#block-1中

---

我想在单击按钮后移动它。

可能是这样的吗

绝对使用CSS定位#block-2：

position:absolute;

然后将其添加到javascript中

$(document).ready(function() {
    $('YOUR_BUTTON_ID').click(function() {
        $('#block-2').animate({
        'top' : "0px",
        'right' : "0px"
        });
    });

});

---

别忘了将您的按钮id添加到上面的代码中

这将使block2变为block1

$("button").click(function(){
    var block1 = document.getElementById('block-1');
    var $block2 = $("#block-2");

    $block2.animate({
        bottom: block1.parentNode.scrollHeight - block1.offsetTop - block1.offsetHeight, 
        left: block1.offsetLeft,
    }, 500);
});

jsiddle:

可以帮助：

var velocity = 1500;

$("button").on("click", function(){
    var pos = $("#parent-block").offset();
    $("body").prepend($("#block-2").detach());
    var move = $("#block-2").css({
        "position": "absolute",
        "z-index": "9999",
        "top": pos.top,
        "left": pos.left
    });
    var block1 = $("#block-1").offset();
    move.animate({
        "top": block1.top,
        "left": block1.left
    }, velocity, function(){
        move.css({"top":"","left":""});
        $("#block-1").prepend(move.detach());
    });
});

---

而且它不止一次有效。

我投了更高的票，因为@washin。。在这种情况下，使用.detach（）非常重要。只有动画是不好的