FadeIn Fairy

by Glynne Turner

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg preserveAspectRatio="xMidYMid meet" viewBox="43 39.499996185302734 114 121.00099182128906" height="200" width="200" xmlns="http://www.w3.org/2000/svg" data-type="color" role="img" style="">
    <g>
        <path d="M140.778 80.343H59.222C50.277 80.343 43 87.596 43 96.512v47.819c0 8.916 7.277 16.17 16.222 16.17h81.556c8.945 0 16.222-7.254 16.222-16.17V96.512c0-8.916-7.277-16.169-16.222-16.169zm13.484 63.987c0 7.411-6.049 13.44-13.484 13.44H59.222c-7.435 0-13.484-6.03-13.484-13.44V96.512c0-7.411 6.049-13.439 13.484-13.439h81.556c7.435 0 13.484 6.029 13.484 13.439v47.818z" fill="#0000A1" data-color="1"></path>
        <path d="M139.162 130.547H60.929c-2.353 0-4.268-1.908-4.268-4.254s1.915-4.254 4.268-4.254h78.054c3.863 0 7.006-3.133 7.006-6.983 0-3.851-3.143-6.983-7.006-6.983H60.838c-2.353 0-4.268-1.908-4.268-4.254 0-2.346 1.915-4.254 4.268-4.254h63.011c.757 0 1.369-.611 1.369-1.365s-.613-1.365-1.369-1.365H60.838c-3.863 0-7.006 3.133-7.006 6.983s3.143 6.983 7.006 6.983h78.145c2.353 0 4.268 1.908 4.268 4.254 0 2.346-1.915 4.254-4.268 4.254H60.929c-3.863 0-7.006 3.133-7.006 6.983 0 3.851 3.143 6.983 7.006 6.983h78.233c2.353 0 4.268 1.908 4.268 4.254s-1.915 4.254-4.268 4.254h-62.51c-.757 0-1.369.611-1.369 1.365s.613 1.365 1.369 1.365h62.51c3.863 0 7.006-3.133 7.006-6.983s-3.143-6.983-7.006-6.983z" fill="#0000A1" data-color="1"></path>
        <path d="M97.682 62.9c0 2.353 1.144 3.582 2.062 4.57.793.852 1.365 1.467 1.365 2.798 0 .719.585 1.303 1.307 1.303s1.307-.583 1.307-1.303c0-2.353-1.144-3.582-2.062-4.57-.793-.852-1.365-1.467-1.365-2.798s.573-1.946 1.365-2.798c.918-.988 2.062-2.217 2.062-4.57 0-2.352-1.144-3.581-2.063-4.568-.792-.851-1.364-1.466-1.364-2.795 0-1.331.573-1.945 1.365-2.797.918-.988 2.062-2.217 2.062-4.569...

CSS

body{background-color:#f6ccbd}
	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
	.fairy{ display:none  }
	.sparkles{fill:#ffffff; display:none }
	.kent{ fill:#ffffff;display:none }
	.stars{ display:none} 
	.smaller1{ display:none  }
	.smaller2{ display:none}
	.smaller3{ display:none} 
	.smaller4{ display:none}  
	.smaller5{ display:none}  
	.smaller6{ display:none}  
	.smaller7{ display:none}   
.test{ fill:green}

JavaScript

function fadestars(){ 
 setTimeout(  
   $(".stars").each(function(index) {
     $(this).delay(20*index).fadeIn(20);
 
}) 
  , 2500)
}; 
function fadefairy(){
  $(".fairy").fadeIn(20);
}
function fadesmall1(){
  $(".smaller1").delay(500).fadeIn(20); 
}
function fadesmall2(){
  $(".smaller2").delay(700).fadeIn(20);   
}
function fadesmall3(){
  $(".smaller3").delay(900).fadeIn(20); 
}
function fadesmall4(){
  $(".smaller4").delay(1100).fadeIn(20);
} 
function fadesmall5(){
  $(".smaller5").delay(1300).fadeIn(20);
} 
function fadesmall6(){
  $(".smaller6").delay(1400).fadeIn(20);
} 
function fadesmall7(){
  $(".smaller7").delay(1600).fadeIn(20);
} 

 
fadefairy();  
fadesmall1(); 
fadesmall2(); 
fadesmall3(); 
fadesmall4(); 
fadesmall5(); 
fadesmall6(); 
fadesmall7(); 
setTimeout(fadestars , 1800);    
setTimeout(function(){
  $(".sparkles").fadeIn();
  $(".kent").delay(200).fadeIn()
}, 2000)