Jquery 在DOM上直观地交换两个HTML元素，并为其设置动画？

在jQuery中，可以交换两个容器的位置吗？既可以在视觉上交换，也可以在DOM中交换，还可以对结果设置动画

我有：

<div id="container">
    <div id="one"><a class="moveUp">Up</a></div>
    <div id="two"><a class="moveUp">Up</a></div>
    <div id="three"><a class="moveUp">Up</a></div>
</div>

现在，我的代码实际上比这更复杂，但它给出了我正在做的外壳

jQuery工作得很好，但是，我如何包含动画呢

---

PS：试图让JSFIDLE运行，但他们的服务器可能会停机

首先尝试设置动画，进行视觉交换，然后在DOM中交换它们：

HTML:

JS:

---

相当老的线程-但现在我碰巧在这里绊倒，并测试解决方案。。。当具有不同的高度div时，解决方案需要稍微调整：clickedDiv高度不能作为两个动画的距离（您可以在此处看到这种情况下的原始代码行为）。要纠正这一点，只需为动画使用不同的顶部值（来自其他div outerHeight）

$('#container div').on('click', '.moveUp', function() {

    divInQuestion = $(this).closest('div').attr('id');  //id of this div

    if (divInQuestion > '1') {

        switchWithDiv = divInQuestion - 1;  //id of other div

        firstSelector = $('#chapterset-'+divInQuestion).html();     //save contents of each div.  I actually don't 
        secondSelector = $('#chapterset-'+switchWithDiv).html();        //do it this way, I regenerate the content

        $('#chapterset-'+divInQuestion).html()firstSelector.replaceWith(secondSelector);    //replace div with other div
        $('#chapterset-'+switchWithDiv).html()secondSelector.replaceWith(firstSelector);
    }
});

<div id="container">
    <div id="one"><a class="moveUp">Up 1</a></div>
    <div id="two"><a class="moveUp">Up 2</a></div>
    <div id="three"><a class="moveUp">Up 3</a></div>
</div>

#container {
    width: 200px;
    border: 1px solid black;
    position: relative;
}
#container div {
    border: 1px solid black;
    position: relative;
}
#container a {
    display: block;
}

var animating = false;

$('#container').on('click', '.moveUp', function () {

    if (animating) {return;}

    var clickedDiv = $(this).closest('div'),
        prevDiv = clickedDiv.prev(),
        distance = clickedDiv.outerHeight();

    if (prevDiv.length) {
        animating = true;
        $.when(clickedDiv.animate({
            top: -distance
        }, 600),
        prevDiv.animate({
            top: distance
        }, 600)).done(function () {
            prevDiv.css('top', '0px');
            clickedDiv.css('top', '0px');
            clickedDiv.insertBefore(prevDiv);
            animating = false;
        });
    }
});