javascript - インクリメンタル css3 フェードイン

Question

どうすればこれを行うことができますか? 私は css3 をパフォーマンス上の理由からのみ使用しようとしています (フェードインは途切れ途切れになる可能性があります)。

現在、それらはすべて同時に発生しています。

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

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

Answer 1

setTimeout間違って呼び出しています。

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

する必要があります：

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

また、これが実用的なフィドルです：http: //jsfiddle.net/q7Wa8/

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

Answer 3

fadeTowith を使用できます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

Answer 4

変更するだけです：

elem.css('opacity',1);

に：

elem.fadeTo('fast', 1);