2 개의 HTML 요소를 시각적으로 DOM에 교환하고 모두 애니메이션으로 만드시겠습니까?

Question

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> 

가 링크를 클릭하면 위의 하나 그 DIV의 위치를 ​​교환합니다. 대부분의 예제에서는 절대 위치 지정을 사용하고이를 위해 top 속성을 상쇄하지만 ... 사용자가 다른 곳에서 함수를 호출 할 때 화면에 표시되는 순서대로 데이터를 읽어야합니다.

그래서 나는이 함께했다 :

$('#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는 잘 작동하지만 애니메이션을 어떻게 포함합니까?

추신 : 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; 
     }); 
    } 
});