[英]incremental css3 fadein
How might I do this? 我怎么能这样做? I'm trying to use css3 only for performance reasons (fade in can get kind of choppy). 我只是出于性能原因尝试使用css3(淡入可能会有些不稳定)。
Right now they all happen at the same time. 现在他们都在同一时间发生。
function fadeInPlaylist(elem) {
elem.css('opacity',1);
}
$(window).load(function() {
$('.playlist').each(function(i) {
setTimeout(fadeInPlaylist($(this)),2500*i);
});
});
You are calling setTimeout
incorrectly. 您正在错误地调用setTimeout
。
setTimeout(fadeInPlaylist($(this)),2500*i);
should be: 应该:
setTimeout(function(){fadeInPlaylist($(this));},2500*i);
Also, here's a working fiddle: http://jsfiddle.net/q7Wa8/ 此外,这是一个工作小提琴: http : //jsfiddle.net/q7Wa8/
If you really need to do it with CSS3 only, use this code: 如果您确实只需要使用CSS3,请使用以下代码:
@keyframes reset {
0% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fade-in {
0% { opacity: 0; }
60% { opacity: 0; }
100% { opacity: 1; }
}
.playlist {
animation-name: reset, fade-in;
animation-duration: 2.5s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
animation-delay: 0, 0;
}
But you'll have compatibility issues. 但是你会遇到兼容性问题。 Here's the cross-browser code, doesn't work in IE: 这是跨浏览器代码,在IE中不起作用:
@keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fade-in { 0% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
@-webkit-keyframes fade-in { 0% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } }
@-moz-keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
@-moz-keyframes fade-in { 0% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } }
@-o-keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
@-o-keyframes fade-in { 0% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } }
.playlist {
animation-name: reset, fade-in;
animation-duration: 2.5s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
animation-delay: 0, 0;
-webkit-animation-name: reset, fade-in;
-webkit-animation-duration: 2.5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0, 0;
-moz-animation-name: reset, fade-in;
-moz-animation-duration: 2.5s;
-moz-animation-timing-function: ease-in;
-moz-animation-iteration-count: 1;
-moz-animation-delay: 0, 0;
-o-animation-name: reset, fade-in;
-o-animation-duration: 2.5s;
-o-animation-timing-function: ease-in;
-o-animation-iteration-count: 1;
-o-animation-delay: 0, 0;
}
You could use fadeTo
with delay
but if you want to do it your way try this: 你可以使用fadeTo
delay
但如果你想这样做你试试这个:
function fadeInPlaylist() {
$(this).css('opacity',1);
}
$(window).load(function() {
$('.playlist').each(function(i, e) {
setTimeout(function(){ fadeInPlaylist.call(e); }, 1000 * i);
});
});
Demo: http://jsbin.com/oyazof/1/edit 演示: http : //jsbin.com/oyazof/1/edit
Edit: 编辑:
If you want to do it with CSS3 transitions you can just add a class instead of changing the css from jQuery. 如果你想用CSS3过渡来做,你可以添加一个类,而不是从jQuery更改css。
jQuery: jQuery的:
function fadeInPlaylist() {
$(this).addClass('opacity');
}
CSS: CSS:
.opacity {
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
opacity: 1;
}
Demo with CSS3 transitions: http://jsbin.com/oyazof/3/edit 使用CSS3过渡演示: http : //jsbin.com/oyazof/3/edit
Just change: 只是改变:
elem.css('opacity',1);
To: 至:
elem.fadeTo('fast', 1);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.