Javascript: Fade In Images On Page Load; One After The Other?

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

Solution 1:

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);
}

Solution 2:

You can use callback function of fadeIn to load other image

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

Solution 3:

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');

	functionfadeIn(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);