How to Fade-in 2 images simultaneously using JS?

Question

Already tried answer - jQuery Fade Images simultaneously

I have 2 divisions with 2 different images and i want them to load after i scroll down to that section, only 1 image is fading-in after i apply the same function to both images.

 var opacity = 0; var intervalID = 0; window.onload = fadeIn; function fadeIn() { setInterval(show, 200); } function show() { var star11 = document.getElementById("star1"); opacity = Number(window.getComputedStyle(star11).getPropertyValue("opacity")); if (opacity < 1) { opacity = opacity + 0.1; star11.style.opacity = opacity } else { clearInterval(intervalID); } } var opacity = 0; var intervalID = 0; window.onload = fadeIn; function fadeIn() { setInterval(show, 200); } function show() { var star22 = document.getElementById("star2"); opacity = Number(window.getComputedStyle(star22).getPropertyValue("opacity")); if (opacity < 1) { opacity = opacity + 0.1; star22.style.opacity = opacity } else { clearInterval(intervalID); } }

 #star1{ opacity:0; width:100px; height:100px; float:left; } #star2{ opacity:0; width:100px; height:100px; float:right; }

 <div> <img id="star1" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="star123"> </div> <div> <img id="star2" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="123star"> </div>

PS - I am new to JS/JQuery.

Thank You

Answer 1

You are declaring the function show twice. So ehat happens here is that the first function that you defined for the first star will be over written by the second function written for the second star and hence the styles for the second star only works. Function defenition is just like variable assigning. The variable name taks the latest value for which that is assigned and will neglect the previous values when define multiple times.

So what I suggest is to decalre the function only once and pass the id as a parameter.

 var opacity = 0; var intervalID = 0; window.onload = fadeIn; function fadeIn() { setInterval(() => show('star1'), 200); setInterval(() => show('star2'), 200); } function show(starId) { var star = document.getElementById(starId); opacity = Number( window.getComputedStyle(star).getPropertyValue("opacity") ); if (opacity < 1) { opacity = opacity + 0.1; star.style.opacity = opacity; } else { clearInterval(intervalID); } }

 #star1 { opacity: 0; width: 100px; height: 100px; float: left; } #star2 { opacity: 0; width: 100px; height: 100px; float: right; }

 <div> <img id="star1" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="star123" /> </div> <div> <img id="star2" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="123star" /> </div>

Update

Handling scroll events.

I have refered this answer to prepare the javascript/jquery solution for scroll

 $(document).ready(function () { $(window).scroll(function () { console.log("Scroll"); triggerScrollListner("star1"); triggerScrollListner("star2"); }); }); function triggerScrollListner(id) { var hT = $(`#${id}`).offset().top, hH = $(`#${id}`).outerHeight(), wH = $(window).height(), wS = $(this).scrollTop(); if (wS > hT + hH - wH) { setInterval(() => show(id), 200); } } var opacity = 0; var intervalID = 0; function show(starId) { var star = document.getElementById(starId); opacity = Number( window.getComputedStyle(star).getPropertyValue("opacity") ); if (opacity < 1) { opacity = opacity + 0.1; star.style.opacity = opacity; } else { clearInterval(intervalID); } }

 body { height: 1000px; } #star1 { opacity: 0; width: 100px; height: 100px; float: left; } #star2 { opacity: 0; width: 100px; height: 100px; float: right; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div> <img id="star1" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="star123" /> </div> <div> <img id="star2" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="123star" /> </div>

More generic solution with multiple stars

Since there was only one row, the visualiztion is a little hard. In this example I have added multiple rows and have made a little bit more visual.

 $(document).ready(function () { $(window).scroll(function () { triggerScrollListner("star1"); triggerScrollListner("star2"); triggerScrollListner("star3"); triggerScrollListner("star4"); }); }); function triggerScrollListner(id) { var hT = $(`#${id}`).offset().top, hH = $(`#${id}`).outerHeight(), wH = $(window).height(), wS = $(this).scrollTop(); if (wS > hT + hH - wH) { setInterval(() => show(id), 200); } } var opacity = 0; var intervalID = 0; function show(starId) { var star = document.getElementById(starId); opacity = Number( window.getComputedStyle(star).getPropertyValue("opacity") ); if (opacity < 1) { opacity = opacity + 0.1; star.style.opacity = opacity; } else { clearInterval(intervalID); } }

 .star { opacity: 0; width: 100px; height: 100px; }.container1, .container2 { display: flex; width: 100%; flex-direction: column; justify-content: space-between; flex-direction: row; }.container2 { margin-top: 1500px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="container1"> <img id="star1" class="star" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="star123" /> <img id="star2" class="star" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="123star" /> </div> <div class="container2"> <img id="star3" class="star" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="star123" /> <img id="star4" class="star" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="123star" /> </div>