2つのHTML要素を視覚的にDOMに入れ替えてアニメーション化しますか？

Question

jQueryでは、2つのコンテナの位置を視覚的にも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> 

は、リンクをクリックすると、上記1とそのdiv要素の位置を交換します。 ほとんどの例では、絶対配置を使用し、これを実現するためにトッププロパティをオフセットしています...しかし、ユーザーが関数を他の場所で呼び出したときに画面に表示される順序でデータを読み込む必要があります。

だから私はこの思い付いた：今

$('#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); 
    } 
}); 

、私のコードは、これよりも実際にはもっと複雑ですが、それは私がやっているのシェルを提供します。

jQueryはうまく動作しますが、アニメーションをどのように含めるのですか？

PS：jsFiddleに行ってみようとしましたが、サーバーがダウンしている可能性があります。

Answer 1

視覚的なスワップを行うために、最初にそれをアニメーション化してみて、そして後にDOMにそれらを交換：

http://jsfiddle.net/BYossarian/GUsYQ/5/

HTML：

<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> 

CSS：

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

JS：

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; 
     }); 
    } 
});