增量css3淡入淡出答案

【问题标题】：incremental css3 fadein增量css3淡入淡出
【发布时间】：2012-09-08 02:14:24
【问题描述】：

我该怎么做？我只是出于性能原因尝试使用 css3（淡入可能会有点不稳定）。

现在它们都同时发生。

function fadeInPlaylist(elem) {
    elem.css('opacity',1);
}

$(window).load(function() {
   $('.playlist').each(function(i) {
      setTimeout(fadeInPlaylist($(this)),2500*i);
   });
});

【问题讨论】：

标签： javascript jquery css timeout

【解决方案1】：

您错误地调用了setTimeout。

setTimeout(fadeInPlaylist($(this)),2500*i);

应该是：

setTimeout(function(){fadeInPlaylist($(this));},2500*i);

另外，这是一个有效的小提琴：http://jsfiddle.net/q7Wa8/

【讨论】：

【解决方案2】：

如果您真的只需要使用 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;
}

【讨论】：

【解决方案3】：

您可以将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

【讨论】：

【解决方案4】：

只是改变：

elem.css('opacity',1);

收件人：

elem.fadeTo('fast', 1);

【讨论】：

他正在使用 CSS3 动画。此外，这不会有什么不同。