Animate appending last child to first

Question

Is there a way that I can animate the moving of a parent's children laid out in a grid from the last element to the first element by appending( .append()) it or any other method?

You may have a look at this previous post: http://stackoverflow.com/questions/1520178/jquery-using-append-with-effects — Littm, Feb 17 '14 at 01:54
Just for fun, and in honor of Start Trek - http://jsfiddle.net/timspqr/49gGx/ — TimSPQR, Feb 17 '14 at 04:22
Thanks...I'm looking for something where I can sort of "shiftoff" and "shift on" to the grid as I add and remove tiles...a sort of metro effect but it "shifts" each tile across and down — Kendall, Feb 17 '14 at 04:46
Perhaps some more details would help us. How big is your grid? 40x40? Left-shifted divs could be used and added or "moved" to the front. — TimSPQR, Feb 17 '14 at 05:06

score 2 · Answer 1 · answered Feb 17 '14 at 01:49

You can fade out the element, remove it, append it and hide, then fade in. Here's the example, jsfiddle:

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

TimSPQR · Answer 2 · 2014-02-17T05:59:03.180

Ok, now that we have more information, perhaps we can come up with a partial solution.

In this FIDDLE the .holder div is set at a fixed size that only allows two rows of mini divs.

You remove the end one, OK, but if you put one in front (prepend() ) everything shifts to the right.

Mickey is the first, Chip and Dale the last - When they are moved to the front, Mickey moves right, and the rest shift appropriately.

I'm sure there are more elegant ways to do this, but at least this is a start.

I used animate just to slow the process down - I'm sure you won't need that.

JS

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

Here is a FIDDLE where it's written as a function, and constantly moves the images around.

Animate appending last child to first

2 Answers2