3

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

4
  • Have you looked at intersectionObserver to let you know when you have scrolled to a section?
    – A Haworth
    Feb 28, 2021 at 11:50
  • intersectionObserver will work if i want to call the function again and again, but here i want to call the function only 1 time so, suppose you scroll down the webpage - image then fade's-in and if you scroll up again it will fade-in again. (I think it works this way) Feb 28, 2021 at 11:55
  • It is entirely up to you what you do on observing an intersection, it doesn’t have to be the same thing each time.
    – A Haworth
    Feb 28, 2021 at 13:18
  • @AHaworth true, thanks for suggestion tho :) Feb 28, 2021 at 13:35

2 Answers 2

2

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>

1
  • What about Scroll ?, So that when i scroll down where the image is placed it loads the function then only. Feb 28, 2021 at 11:41
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.