Question

有没有办法可以通过追加（.append（））或其他任何方法来动画显示从最后一个元素到第一个元素的网格中的父元素的移动？

Answer 1

你可以淡出元素，删除它，追加并隐藏，然后淡入。这是一个例子，jsfiddle：

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

Answer 2

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

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

你删除了最后一个，好的，但如果你把一个放在前面（前置（）），一切都向右移动。

Mickey是第一个，Chip和Dale是最后一个 - 当他们被移到前面时，Mickey向右移动，其余的移动得恰到好处。

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

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

JS

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

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

动画将最后一个孩子添加到第一个

2 个答案: