Нужно исчезать в каждом круге 1 за другим с помощью jQuery - PullRequest
Новая
       55

Нужно исчезать в каждом круге 1 за другим с помощью jQuery

0 голосов
/ 19 февраля 2012

Это расширение предыдущего вопроса, на который вчера был дан ответ, который можно найти здесь: Расширение кругов с помощью анимации CSS3

Но теперь клиент запросил, чтобы каждый круг моги текст постепенно исчезает один за другим, сохраняя растущую анимацию.

Я использую переходы CSS3 для увеличения круга, но теперь я думаю, что теперь мне нужно сделать анимацию с помощью jQuery?

Вы можете увидеть то, что у меня сейчас есть: 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: 

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

Кто-нибудь может помочь с этим?

1 Ответ

3 голосов
/ 19 февраля 2012

Попробуйте это вы можете увидеть здесь 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

.circle{opacity: 0;}

...