需要用jQuery对每个圆圈逐个执行fadeIn
需要用jQuery对每个圆圈逐个执行fadeIn
提问于 2012-02-20 02:22:36
这是对昨天回答的前一个问题的扩展，可以在这里找到：Expanding circles with CSS3 animations
但现在客户已经要求可以将每个圆圈和文本一个接一个地淡入，但保持不断增长的动画。
我正在使用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
Stack Overflow用户
回答已采纳
发布于 2012-02-20 02:28:15
试试这个，你可以在这里看到它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);
});为此，您还需要添加
.circle{opacity: 0;}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9351840
复制相关文章
相似问题
腾讯云开发者
