Javascript 使用动画在div之间切换div

我有两个主div上div和下div，在这两个div中有1-1个div，即上div中有一个div，下div中有两个div

我有一个切换按钮使用，我移动一个div到底部div和两个div在顶部div。它的工作很好。但我想展示动画，比如一个div向上移动，两个div向下移动，反之亦然

这是我的密码

函数swapButtonClickedclicked_id{ 如果单击_id==btn底部{ document.getElementById'top-div'。appendChilddocument.getElementById'one-div'； document.getElementById'bottom-div'。appendChilddocument.getElementById'two-div'； }否则，如果单击\u id==btn top{ document.getElementById'bottom-div'。appendChilddocument.getElementById'one-div'； document.getElementById'top-div'。appendChilddocument.getElementById'two-div'； } } 移动1 移动2 顶

---

几天前，我在做某事时偶然发现了这篇文章：

将该函数更改为prependTo版本，我创建了一个小提琴，这可能正是您要寻找的：

---

您还可以向animatePrependTo函数添加一个回调，这样您就可以在交换过程中禁用涉及的任何按钮。这样你就不会因为点击按钮太快而破坏它。

你的HTML是什么？在我写的时候，你有超过2.5k的代表，所以这个提示在这一点上是不必要的。另外，上面的代码是如何不工作的，它不应该做什么，它不应该做什么？浏览器的开发人员工具中是否报告了任何错误？已更新。。第一次创建代码段，所以不知道这一点。可能的重复是代码的完全重复，为什么不将问题标记为重复？！

$.fn.animatePrependTo = function(sel, speed) {
    var $this = this,
        newEle = $this.clone(true).prependTo(sel),
        newPos = newEle.position();
    newEle.hide();
    $this.css('position', 'absolute').animate(newPos, speed, function() {
        newEle.show();
        $this.remove();
    });
    return newEle;
};

$('#swap').on("click", function() {
    var tmp = $('#inner1').parent();
    $('#inner1').animatePrependTo($("#inner2").parent(),2000);
    $('#inner2').animatePrependTo(tmp,2000);
});