Animation How to - Show image fade in one by one








Question

We would like to know how to Show image fade in one by one.

Answer


<html>
<head>
<!--   ww  w .  j a va 2  s . c o  m-->
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<style type='text/css'>
#fds img {
  opacity: 0;
}

@keyframes fdsseq { 
  100% {opacity: 1;}
}
#fds img {
  animation: fdsseq .5s forwards;
}

#fds img:nth-child(1) {
  animation-delay: .5s;
}

#fds img:nth-child(2) {
  animation-delay: 1s;
}

#fds img:nth-child(3) {
  animation-delay: 1.5s;
}
</style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function(){$('div#fds img').each(function(i){$(this).delay((i++)*500).fadeTo(1000,1);})});
});//]]>  
</script>
</head>
<body>
  <div id="fds">
    <img
      src="http://www.java2s.com/style/download.png"
      alt="name"> <img
      src="http://www.java2s.com/style/download.png"
      alt="name"> <img
      src="http://www.java2s.com/style/download.png"
      alt="name"> <img
      src="http://www.java2s.com/style/download.png"
      alt="name"> <img
      src="http://www.java2s.com/style/download.png"
      alt="name">
  </div>
</body>
</html>

The code above is rendered as follows: