Fragmento de jQuery para intercambiar dos conjuntos de elementos con animación

¿Hay algún código jQuery para intercambiar 2 conjuntos de elementos con animación?

solo encontré Mover elemento de la lista a la parte superior de la lista desordenada utilizando jQuery, pero es demasiado limitado (solo deslice el elemento hacia arriba y sin tener en cuenta los diferentes márgenes).

ver este violín Se admiten bordes arbitrarios, márgenes, rellenos, tamaños, etc. y aún no hay saltos al final de la animación.

function slideSwap($set1, $set2) { //$elem.append(infoString($elem)); //$after.append(infoString($after)); $set1.css("color", "red"); $set2.css("color", "blue"); var $set3 = $set2.last().nextAll(); $set3.css("color", "green"); var mb_prev = cssprop($set1.first().prev(), "margin-bottom"); if (isNaN(mb_prev)) mb_prev = 0; var mt_next = cssprop($set2.last().next(), "margin-top"); if (isNaN(mt_next)) mt_next = 0; var mt_1 = cssprop($set1.first(), "margin-top"); var mb_1 = cssprop($set1.last(), "margin-bottom"); var mt_2 = cssprop($set2.first(), "margin-top"); var mb_2 = cssprop($set2.last(), "margin-bottom"); var h1 = $set1.last().offset().top + $set1.last().outerHeight() - $set1.first().offset().top; var h2 = $set2.last().offset().top + $set2.last().outerHeight() - $set2.first().offset().top; move1 = h2 + Math.max(mb_2, mt_1) + Math.max(mb_prev, mt_2) - Math.max(mb_prev, mt_1); move2 = -h1 - Math.max(mb_1, mt_2) - Math.max(mb_prev, mt_1) + Math.max(mb_prev, mt_2); move3 = move1 + $set1.first().offset().top + h1 - $set2.first().offset().top - h2 + Math.max(mb_1,mt_next) - Math.max(mb_2,mt_next); // let's move stuff $set1.css('position', 'relative'); $set2.css('position', 'relative'); $set3.css('position', 'relative'); $set1.animate({'top': move1}, {duration: 1000}); $set3.animate({'top': move3}, {duration: 500}); $set2.animate({'top': move2}, {duration: 1000, complete: function() { // rearrange the DOM and restre positioning when we're done moving $set1.insertAfter($set2.last()) $set1.css({'position': 'static', 'top': 0}); $set2.css({'position': 'static', 'top': 0}); $set3.css({'position': 'static', 'top': 0}); } }); } 

o incluso mejor aún, use Quicksand

Vea este violín: http://jsfiddle.net/maniator/26UNk/

 $("#content ul").sortable({ opacity: 0.6, cursor: 'move', update: function() { var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; $.post("updateDB.php", order, function(theResponse) { $("#response").html(theResponse); }); } }); 

Eso podría ayudar (tiene un elemento de arrastre)

Hay un complemento de jQuery para hacerlo ahora, no lo he probado todavía, pero la demostración parece funcionar bien: http://biostall.com/swap-and-re-order-divs-smoothly-using-jquery-swapsie -enchufar