CODEWITHSUNDEEP
javascripthtmlcss
chaser7016
chaser7016

Reputation: 595

How can I 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 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>

Upvotes: 0

Views: 1818

Answers (3)

chaser7016
chaser7016

Reputation: 595

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

Upvotes: 0

Domain
Domain

Reputation: 11808

You can use callback function of fadeIn to load other image

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

Upvotes: 0

apscience
apscience

Reputation: 7253

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

Upvotes: 2

Related Questions