动画将最后一个孩子附加到第一个[关闭]答案

【问题标题】：Animate appending last child to first [closed]动画将最后一个孩子附加到第一个[关闭]
【发布时间】：2014-02-17 01:32:34
【问题描述】：

有没有一种方法可以通过附加（.append()）或任何其他方法来动画化布置在网格中的父母的孩子从最后一个元素到第一个元素的移动？

【问题讨论】：

你可以看看这个之前的帖子：stackoverflow.com/questions/1520178/…
只是为了好玩，为了纪念 Start Trek - jsfiddle.net/timspqr/49gGx
谢谢...我正在寻找可以在添加和删除瓷砖时对网格进行“shiftoff”和“shift on”排序的东西...一种地铁效果，但它上下“移动”每个图块
也许更多细节会对我们有所帮助。你的网格有多大？ 40x40？可以使用左移 div 并将其添加或“移动”到前面。

标签： javascript jquery css jquery-animate

【解决方案1】：

你可以淡出元素，移除它，添加它并隐藏，然后淡入。下面是例子，jsfiddle：

$(document).ready(function(){
    $(".do").click(function() {
        $(".last").fadeOut(1000, function() {
            var $last = $(this).remove();
            $last.hide();
            $("ul").prepend($last);
            $last.fadeIn(1000);
        });
    });
});

【讨论】：

【解决方案2】：

好的，既然我们有了更多信息，也许我们可以想出一个部分解决方案。

在这个FIDDLE 中，.holder div 设置为固定大小，只允许两行迷你 div。

你删除最后一个，好的，但是如果你把一个放在前面（prepend()），一切都会向右移动。

米奇第一个，奇普和戴尔最后一个 - 当他们移动到前面时，米奇向右移动，其余的移动适当。

我确信有更优雅的方法可以做到这一点，但至少这是一个开始。

我使用动画只是为了减慢这个过程 - 我相信你不会需要它。

$('.holder').animate(
    {
        width: 401
    },
    1000,
    function(){
        var copypic = $('.holder div:last-child').clone();
        $('.holder div:last-child').remove();
        $('.holder').prepend( copypic );
    });

这是一个FIDDLE，它被写成一个函数，并且不断地移动图像。

【讨论】：