jQuery片段用动画交换两组元素
是否有一些jQuery代码用动画交换2组元素？
我只发现使用jQuery将移动列表项置于无序列表的顶部，但它太有限（只有滑动元素到顶部而不考虑不同的边距）。
看到这个小提琴 。 支持任意边框，边距，填充，大小等，动画结束时仍然没有跳转。
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}); } }); } 或者甚至更好，使用流沙
看到这个小提琴： 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); }); } });
这可能会有所帮助（它确实有一个拖动元素）
现在有一个jQuery插件可以做到，我还没有尝试过，但是这个演示看起来效果很好： http ： //biostall.com/swap-and-re-order-divs-smoothly-using-jquery-swapsie -插入