需要淡入每圈1其他使用jQuery后 [英] Need to fadeIn each circle 1 after the other with jQuery

问题描述

这是一个previous疑问，昨天得到了回答，这可以在这里找到一个扩展：的扩大与CSS3动画界

This is a expansion on to a previous question that got answered yesterday, which can be found here: Expanding circles with CSS3 animations

但现在的客户端请求可在每个圆圈，另一个但保持增长的动画之后的文本淡入之一。

But now the client has requested that can each circle and the text fade in one after the other but keeping the growing animation.

我使用CSS3过渡到成长的圈子，但现在我想，我现在需要做的动画与jQuery？

I am using CSS3 transitions to grow the circle but I'm now thinking that I now need to do the animation with jQuery?

您可以看到我目前有此： http://thomasbritton.co.uk/projects/欧洲复兴开发银行/

You can see what I have currently here: http://thomasbritton.co.uk/projects/ebrd/

下面是我目前的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);
}

下面是我目前的CSS它处理CSS动画成长：

Here is my current CSS which handles the CSS growing animation:

.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;
}

任何人都可以在这方面帮助？

Can anybody help with this?

推荐答案

尝试这个你可以看到它在这里 HTTP ：//jsfiddle.net/ME5fm/2/ ：

Try out this you can see it here http://jsfiddle.net/ME5fm/2/:

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

为此，你还需要添加的CSS

for this you also need to add the css of

.circle {不透明：0;}

这篇关于需要淡入每圈1其他使用jQuery后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！