How can I fade in images on page load one after the other?

Question

I have created the following code that on page load adds opacity: 1 to all divs on the page. In doing so all the images are seen on pageload, but I want each to fade in slowly and after one has completely loaded/is visible I want the 2nd image to load exactly the same then followed by the third.

How can I accomplish this via the code below; what needs to be changed/added? Please note it must use pure Javascript; no CSS3 or jQuery as the proprietary framework I'm working in requires pure JS.

var imageOne = document.getElementById('imageOne');
var imageTwo = document.getElementById('imageTwo');
var imageThr = document.getElementById('imageThr');

function fadeIn() {
  imageOne.style.opacity = '1';
  imageTwo.style.opacity = '1';
  imageThr.style.opacity = '1';
}

#imageOne {
  background: url('https://thingiverse-production-new.s3.amazonaws.com/renders/16/04/2d/b5/ed/smiley_face_thumb_small.jpg');
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  margin-right: 20px;
  float: left;
  opacity: 0;
}
#imageTwo {
  background: url('http://www.mpaart.org/wp-content/uploads/2015/07/twitter-logo-round-50x50.png');
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  margin-right: 20px;
  float: left;
  opacity: 0;
}
#imageThr {
  background: url('http://orig08.deviantart.net/24c1/f/2009/238/d/8/small_50x50__png_clock_pic_by_counter_countdown_ip.png');
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  float: left;
  opacity: 0;
}

<body onload="fadeIn()">
  <div id="wrapper">
    <div id="imageOne"></div>
    <div id="imageTwo"></div>
    <div id="imageThr"></div>
  </div>
</body>

As a note for you. You can use jquery if the only thing you are worrying about is it working in ie 6+. https://jquery.com/browser-support/ — Spaceman, Nov 17 '15 at 06:13
As another note. You are restricting the use of css3 but then you use it. https://developer.mozilla.org/en-US/docs/Web/CSS/opacity I could be reading that wrong but i think opacity only came in at css3. — Spaceman, Nov 17 '15 at 06:18

score 2 · Answer 1 · answered Nov 17 '15 at 06:04

You can use CSS transitions, which is faster and won't require jQuery.

.fadeIn {
    transition: opacity 1.25s;
}

Add the class fadeIn to your image elements, and now it'll fade.

To make it fade one after the other, use JavaScript timers to space out setting opacity to 1. Example:

var elements = [ /* Image elements to fade */ ];

for (var i = 0; i < elements.length; i++) {
    setTimeout(function() {
        elements[i].style.opacity = 1;
    }, 1250 * i);
}

Wasn't me! Thank you, I'm going to try the above. – chaser7016 Nov 17 '15 at 06:12 — chaser7016, Nov 17 '15 at 06:12

score 0 · Answer 2 · answered Nov 17 '15 at 06:10

0

You can use callback function of fadeIn to load other image

function fadeIn() {
$("#imageOne").fadeIn("fast",function(){
      $("#imageTwo").fadeIn("fast", function(){
           $("#imageThr").fadeIn("fast");
      });
   });
 }

answered Nov 17 '15 at 06:10

Domain

11,562
3
23
44

score 0 · Answer 3 · answered Nov 17 '15 at 06:54

This is what I came up with so far. Unfortunately, I haven't figure how to have them fade in, as the below just makes them appear one after the other. Though it's pure Javascript.

Any suggestions?

    var imageOne = document.getElementById('imageOne');
 var imageTwo = document.getElementById('imageTwo');
 var imageThr = document.getElementById('imageThr');

 function fadeIn(element) {
  element.style.opacity += 0.9;

  if (element.style.opacity < 1) {
   setTimeout(function() {
    fadeIn(element);
   }, 100);
  }
 }
 setTimeout(function() {
  fadeIn(document.getElementById("imageOne"));
 }, 1000);
 setTimeout(function() {
  fadeIn(document.getElementById("imageTwo"));
 }, 5000);
 setTimeout(function() {
  fadeIn(document.getElementById("imageThr"));
 }, 10000);

How can I fade in images on page load one after the other?

3 Answers3

Linked

Related