Question

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

这是我的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>进行排序，以便<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');

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

1 个答案: