jQueryのスニペットを使ってアニメーションの要素を2組交換する

Question

2組の要素をアニメーションで入れ替えるためのjQueryコードがありますか？

私は唯一見つけた Move list item to top of unordered list using jQueryですが、あまりにも制限されています（スライドの要素が上にあり、余白を考慮していません）。

Answer 1

またはより良いまだ、Quicksand

Answer 2

このフィドルを参照してください：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); 
     }); 
    } 
}); 

（それはそれにドラッグ要素を持っている）役立つかもしれない

Answer 3

このfiddleを参照してください。任意のボーダー、マージン、パディング、サイズなどがサポートされ、アニメーション終了時にはジャンプはありません。

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


} 

Answer 4

今それを行うためのjQueryプラグインがありますが、私はまだ試していないが、デモはうまく動作しているように使用：http://biostall.com/swap-and-re-order-divs-smoothly-using-jquery-swapsie-plugin