İki HTML öğesini görsel olarak ve DOM üzerinde değiştirebilir ve tümünü animasyonlandırabilirsiniz?

Question

jQuery'de hem görsel olarak hem de DOM'ta iki kapsayıcının konumunu değiştirmek mümkün mü, aynı zamanda sonucu canlandırabilir mi?

Ben:

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

bağlantısının tıklanması yukarıdaki biriyle söz konusu div pozisyon takas edecek. Çoğu örnek, mutlak konumlandırmayı kullanır ve bunu başarmak için en üstteki özelliği ofsetler ... ancak kullanıcı bir işlevi başka bir işlev çağırdığında ekranda görüntülenen sırayla okumam gerekir.

yüzden bu geldi:

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

Şimdi benim kod aslında daha karmaşık bundan daha, ama ne yapıyorum kabuğunu verir.

jQuery iyi çalışıyor, ancak nasıl bir animasyon ekleyebilirim?

PS: ?? Bir jsFiddle gidiyor ama onların sunucuları aşağı atm olabilir ulaşmaya çalıştık !!?

Answer 1

görsel takas yapmak, önce onu animasyon deneyin, sonra kendi DOM bunları takas:

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