用动画交换两组元素的jQuery片段答案

【问题标题】：jQuery snippet to swap two sets of elements with animation用动画交换两组元素的jQuery片段
【发布时间】：2011-05-12 21:52:48
【问题描述】：

是否有一些 jQuery 代码可以用动画交换 2 组元素？

我只发现 Move list item to top of unordered list using jQuery 但它太有限（仅将元素滑动到顶部，不考虑不同的边距）。

【问题讨论】：

哎呀，本来是要回答我自己的问题，但作为一个新用户，那是不可能的。无论如何，这是解决方案：jsfiddle.net/ZXYZ3/139

标签： jquery jquery-animate swap

【解决方案1】：

看到这个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});
    }
});


}

【讨论】：

这是一些有趣的代码。我正在尝试以此为基础进行自己的排序。您可以添加到小提琴中的任何 cmets/notes 都将是无价的。

【解决方案2】：

或者更好的是，使用Quicksand

【讨论】：

【解决方案3】：

现在有一个 jQuery 插件可以做，我还没有尝试过，但演示似乎运行良好：http://biostall.com/swap-and-re-order-divs-smoothly-using-jquery-swapsie-plugin

【讨论】：

这真的很有帮助

【解决方案4】：

看到这个小提琴：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);
        });
    }
});

这可能会有所帮助（它确实有一个拖动元素）

【讨论】：