We would like to know how to Show image fade in one by one.
<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: