同じアニメーションでも、こんなに短くなるなんて。って思いました。
メモとして残しておきます。
やりたいこと
２つの要素があって、
①最初は2つとも非表示
②１つ目の要素がfadeInして、数秒表示された後、fadeOut
③②が終わったら、２つ目の要素がfadeInして、数秒表示された後、fadeOut
cssを使用してアニメーション
style.css
.fade{opacity:0;}.subfade{opacity:0;}script.js
$(function(){$('.fade').css({opacity:"0"});setTimeout(function(){$(".fade").animate({opacity:"1.0"},500);},500);setTimeout(function(){$(".fade").animate({opacity:"0"},500);},2500);});$(function(){$('.subfade').css({opacity:"0"});setTimeout(function(){$(".subfade").animate({opacity:"1.0"},500);},2900);setTimeout(function(){$(".subfade").animate({opacity:"0"},500);},4400);});cssで最初どっちもopacity: 0;にしといて、
fadeInとfadeOutによってopacity変えればOK
ちなみに、display: none;とdisplay: block;だとcssでの指定ができなかった。
jQueryでcssを使用して要素を消す系だと、opacityしか通用しないのかな？
delayメゾッドを使用
上記のコードが
こんな簡単になりました。
style.css
.fade{display:none;}.subfade{display:none;}script.js
$(window).on('load',function(){$(".fade").fadeIn(1000).delay(1000).fadeOut(500);$(".subfade").delay(2300).fadeIn(2000).delay(1000).fadeOut(500);});delayを使えば簡単ですね。
秒数は上記2つの方法で一緒では無いので、お好きな時間に変更してください。
参考
http://js.studio-kingdom.com/jquery/effects/delay
http://www.jquerystudy.info/reference/effects/delay.html