CODEWITHSUNDEEP
javascripthtmljquerycss
Lakshay Kalra
Lakshay Kalra

Reputation: 352

How to Fade-in 2 images simultaneously using JS?

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>

P.S - I am new to JS/JQuery.

Thank You

Upvotes: 3

Views: 119

Answers (2)

Nitheesh
Nitheesh

Reputation: 19986

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>

Upvotes: 2

Lakshay Kalra
Lakshay Kalra

Reputation: 352

Just fiddled around into the code

Needed only 1 function and changed code in js only.

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

Upvotes: 0

Related Questions