需要使用jQuery逐个淡入每个圆圈

这是对昨天回答的前一个问题的扩展，可以在这里找到：

但现在客户要求每个圆圈和文本可以一个接一个地淡入，但要保持不断增长的动画

我正在使用CSS3转换来增长圆，但是我现在想我现在需要用jQuery来做动画

您可以在这里看到我目前拥有的内容：

以下是我当前的js：

setTimeout(function() {
    $('.circle').addClass('open');
}, 100);

if ($.browser.msie || $.browser.version < 9) {
    var circle = $('div.circle');
    $(circle).animate({
        height: 168,
        width: 168,
        left: '0',
        top: '0'
    }, 1000);
}

---

有人能帮忙吗？

试试这个你可以在这里看到：

为此，您还需要添加

---

.circle{opacity:0；}

试试这个你可以在这里看到它：

为此，您还需要添加

---

.circle{opacity:0；}

您好，当我尝试此操作时，我得到一个js错误：“circle.length不是函数”现在已对错误进行排序，但似乎没有发生以前没有发生过的事情。它们都在扩张。哇，那就快到了！你知道如何添加它以使每个项目同时淡入和增长吗？我添加了fadeIn（）；在addClass（'open'）之后，似乎可以工作。还有更好的方法吗？先生，你是个传奇！非常感谢你！嗨，当我尝试这一点时，我得到了一个js错误：“circle.length不是一个函数”现在已经对错误进行了排序，但似乎没有发生以前没有发生过的事情。它们都在扩张。哇，那就快到了！你知道如何添加它以使每个项目同时淡入和增长吗？我添加了fadeIn（）；在addClass（'open'）之后，似乎可以工作。还有更好的方法吗？先生，你是个传奇！非常感谢你！

.circle {
border-radius: 100%;
font-family: 'Helvetica', Arial, sans-serif;
font-size: 14px;
height: 0px;
left: 84px;
-moz-transition-duration: 2s;
-moz-transition-property: all;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-duration: 2s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
transition-duration: 2s;
transition-property: all;
transition-timing-function: ease-in-out;
text-align: center;
overflow: hidden;
position: absolute;
top: 84px;
width: 0px;
}

.circle.open {
top: 0px;
left: 0px;
width: 168px;
height: 168px;
}

$('.circle').each(function(i){
    var time = 500 * (i + 1);
    setTimeout(function(){
        $('.circle').eq(i).addClass('open').animate({opacity: '1'}, i);
    }, time);
});