[英]incremental css3 fadein
我怎么能這樣做? 我只是出於性能原因嘗試使用css3(淡入可能會有些不穩定)。
現在他們都在同一時間發生。
function fadeInPlaylist(elem) {
elem.css('opacity',1);
}
$(window).load(function() {
$('.playlist').each(function(i) {
setTimeout(fadeInPlaylist($(this)),2500*i);
});
});
您正在錯誤地調用setTimeout
。
setTimeout(fadeInPlaylist($(this)),2500*i);
應該:
setTimeout(function(){fadeInPlaylist($(this));},2500*i);
此外,這是一個工作小提琴: http : //jsfiddle.net/q7Wa8/
如果您確實只需要使用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;
}
但是你會遇到兼容性問題。 這是跨瀏覽器代碼,在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;
}
你可以使用fadeTo
delay
但如果你想這樣做你試試這個:
function fadeInPlaylist() {
$(this).css('opacity',1);
}
$(window).load(function() {
$('.playlist').each(function(i, e) {
setTimeout(function(){ fadeInPlaylist.call(e); }, 1000 * i);
});
});
演示: http : //jsbin.com/oyazof/1/edit
編輯:
如果你想用CSS3過渡來做,你可以添加一個類,而不是從jQuery更改css。
jQuery的:
function fadeInPlaylist() {
$(this).addClass('opacity');
}
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;
}
使用CSS3過渡演示: http : //jsbin.com/oyazof/3/edit
只是改變:
elem.css('opacity',1);
至:
elem.fadeTo('fast', 1);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.