如何使用 JS 同时淡入 2 个图像？

Question

已经尝试过回答-jQuery Fade Images simultaneously

我有 2 个具有 2 个不同图像的分区，我希望它们在我向下滚动到该部分后加载，在我对两个图像应用相同的功能后只有 1 个图像淡入。

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 - 我是 JS/JQuery 的新手。

谢谢

Answer 1

您将函数show 声明了两次。所以这里发生的情况是，您为第一个星定义的第一个函数将被为第二个星编写的第二个函数覆盖，因此第二个星的样式仅适用。函数定义就像变量赋值。变量名取最新分配的值，多次定义时忽略之前的值。

所以我的建议是只对函数进行一次 decalre 并将 id 作为参数传递。

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>

更新

处理滚动事件。

我已经参考了this的答案来准备滚动的javascript/jquery解决方案

$(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>

更通用的多星解决方案

由于只有一排，因此视觉化有点困难。在此示例中，我添加了多行，并且更加直观。

$(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>