Javascript 如何通过动画显示正在排序的HTML元素

以下是我的片段：

.item{
显示：内联块；
宽度：120px；
高度：120px；
边框：1px纯红；
}

项目5
项目3
项目2
项目1
项目4

虽然您可以不用jquery轻松完成这项工作，但这里有一种（非动画）排序方法：

var sorted = $('#listing div').sort(function(a,b) {
   return $(a).data('value') - $(b).data('value');
});

$('#listing').html(sorted);

---

我将了解如何设置排序动画

以下是如何设置排序动画：

循环遍历所有元素并存储它们的位置

将元件绝对定位在其原始位置

获取要替换的项目的位置，并设置该位置的动画

（可选）动画完成后，您可能希望按排序顺序将绝对定位的项与常规项交换，以便元素的DOM顺序正确

函数animateSort（父、子、排序属性）{
var承诺=[]；
var头寸=[]；
var originals=$（父级）.find（子级）；
var sorted=originals.toArray（）.sort（函数（a，b）{
返回$（a）.attr（sortatAttribute）>$（b）.attr（sortatAttribute）；
});
原件。每个（函数（）{
//存储原始位置
positions.push（$（this.position（））；
}).每个（功能（原始索引）{
//将项目更改为绝对位置
var$this=$（this）；
var newIndex=sorted.indexOf（this）；
排序后的[newIndex]=$this.clone（）；//复制原始项，然后再更改其位置
$this.css（“position”，“absolute”）.css（“top”，positions[originalIndex].top+“px”）.css（“left”，positions[originalIndex].left+“px”）；
//设置动画到新位置
var promise=$this.animate({
顶部：位置[newIndex]。顶部+“px”，
左：位置[newIndex]。左+“px”
}, 1000);
承诺。推动（承诺）；
});
//不要让项目失去顺序和位置，而是按排序顺序替换它们
$.when.apply（$，promissions）.done（函数（）{
原件。每个（功能（索引）{
$（this）.replacetwith（排序[索引]）；
});
});
}
$（函数（）{
$（“输入”）。单击（函数（）{
animateSort（“列表”、“div”、“数据值”）；
});
});
.item{
显示：内联块；
宽度：120px；
高度：120px；
边框：1px纯红；
}

项目5
项目3
项目2
项目1
项目4
Nice的可能副本：知道如何制作动画吗？我将其更改为新位置的动画。请参阅更新的答案