So I wrote a Tag list with animation a while back to do what I think you are trying to do.
It was very specific in how it worked and would be a ball ache to break down and rewrite.
But if we add some attributes to your elements (data-item-id - for sort order when they animate back and forth)
Then we can use the project's above animation code to do what you want.
So we would add the code to sort the array of elements. ( each element given an index number in the attributes.
//Get all target elements
var aTarget_ = document.querySelectorAll(targetType)
var aTarget_Arr = Array.prototype.slice.call(aTarget_);
//-- SORT For ANIMATION array
aTarget_Arr.sort(function(obj1, obj2) {
return $(obj1[0]).attr("data-item-id") - $(obj2[0]).attr("data-item-id")
});
Then after we show/hide them, we animate.
///
//-- ANIMATION
var rowCount = 20 // max deep number of rows
var columnCount = 2 //- max number of columns
var columnCounter = 0;
var leftRange = 0;//-- initial left of first column
var topRange = 0;// initail top of first row
var topRangeSpacing = 275 ; //-- we space each ROW by this. normally the height + som px of an element.
$.each(aTarget_Arr, function( index, thisItem ) {
if (columnCounter >= columnCount) {
topRange = topRange + topRangeSpacing;
leftRange = 0 ; //Start new column left
columnCounter = 0
}
$(thisItem).animate({ "left": leftRange, "top": topRange }, "slow" );
leftRange = leftRange + 197 ; // add item width + some px
columnCounter++
});
Pretty simple in the end to use the code with minor changes for this setup.