jQuery重新排列具有递减年份的Divs，并具有一些过渡效果

Question

我有以下div，我想根据其中的年份按年份降序重新排列div，并产生一些过渡效果。如何使用jQuery完成此操作？

<div class="year">2002</div>
<div class="year">2003</div>
<div class="year">2001</div>
<div class="year">2004</div>

它应该像一样重新排列

<div class="year">2001</div>
<div class="year">2002</div>
<div class="year">2003</div>
<div class="year">2004</div>

Answer 1

可以试试这样的东西：

var $yrs=$('.year'), $parent=$yrs.parent();
$yrs.detach().sort(function(a,b){    
    return a.textContent - b.textContent
}).hide();
$parent.append($yrs);
var delay=500;
$yrs.each(function(i){
     $yrs.eq(i).delay( i * delay).slideDown();           
});

不知道你心目中的是什么样的过渡

DEMO

Answer 2

这是一个有趣的游戏。当然，有无数种方法可以做到这一点并展示动画。这是一个排序动画，它将当前位置向下滑动到零高度，同时将新排序的位置滑动到适当的高度：

function animateSort(sel, time) {
    var items = [];
    $(sel).each(function() {
        items.push({elem: this, data: this.innerHTML});
    });
    items.sort(function(a, b) {
        return a.data.localeCompare(b.data);
    });
    var cntr = 0;
    var insertLocation;
    function nextItem() {
        if (cntr < items.length) {
            var target = $(items[cntr++].elem);
            // insert a clone and let it slideup (to disappear)
            target.clone(false).insertAfter(target).slideUp(time, function() {
                $(this).remove();
            });
            if (!insertLocation) {
                // if first one, make it first in the list
                target.prependTo(target.parent());
            } else {
                // insert after the last one we did
                target.insertAfter(insertLocation);
            }
            // hide, then slideDown (to reveal)
            target.hide().slideDown(time, nextItem);
            // set new insert location
            insertLocation = target;
        }
    }
    nextItem();
}

工作演示：http://jsfiddle.net/jfriend00/TTEYL/

它的工作原理如下：

1. 获取要排序的项目列表
2. 根据HTML内容对它们进行排序
3. 对于每个项目，制作一个克隆。在原始位置插入该克隆，这样我们就可以在原始位置向上滑动内容
4. 将我们正在排序的当前项移动到DOM中正确的排序位置
5. 隐藏当前项目（以便我们可以将其向下滑动）
6. 向上滑动克隆（使其消失）
7. 将原件（现在位于其排序位置）向上滑动（使其显示）
8. 动画完成后，移除克隆并开始下一个序列