以预定义的顺序显示一系列 <div>

Question

我正在构建一个动画，我希望随着时间的推移出现一系列 <div>s（将它们的不透明度从 0 更改为 1），按照我分配给它们的顺序。到目前为止，我已经完成了第一部分：<div>s 一个一个出现在屏幕上。

这是我的 HTML：

<div id="parent_container">
<div n="2">1</div>
<div n="1">2</div>
<div n="3">3</div>
<div n="4">4</div>
<div n="5">5</div>
<div n="7">6</div>
<div n="6">7</div>
<div n="8">8</div>
<div n="9">9</div>
</div>

（带有一些 CSS 用于背景颜色、不透明度等）这是我的功能：

var delay = 0;
$('div').each(function(){
    $(this).delay(delay).animate({
        opacity:1,
    },500);
    delay += 500;
});

你可以在这里摆弄我的代码：http://jsfiddle.net/VS8tQ/250/

但是现在我想在动画运行时对那些<div>s 进行排序，以便<div n="1">（在本例中为“2”）出现在<div n="2">（在本例中为“1”）之前。我需要的似乎与此处提出的问题非常相似：How to sort DOM elements while selecting in jQuery?（其解决方案已复制为上述小提琴中的评论）。但我似乎无法让它使用与@id 不同的属性，这对我来说是个问题（因为我需要该属性来做其他事情）。

有什么建议吗？

Answer 1

您可以使用以下方式对元素进行排序：

Updated Example

$('.circle[n]').sort(function(a,b) {
     return $(a).attr('n') > $(b).attr('n');
}).appendTo('#parent_container');