javascript - 如何使用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>