Question

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.

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

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

Here is my current 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);
}

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?

Answer 1

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

for this you also need to add the css of

.circle{opacity: 0;}