点击按钮实现图片淡入淡出切换功能失效，寻求技术解决方案

点击按钮后希望当前图片先执行fadeOut（淡出）效果，切换为另一张图片后再执行fadeIn（淡入）效果，但编写的代码中fadeIn和fadeOut动画完全没有效果，运行后无任何反应。

现有代码 #

JavaScript代码 #

var score = 0

function changeImage1() {
  document.getElementById("image1").src = "gold.png";
  document.getElementById("image2").src = "broken.png";
  document.getElementById("image3").src = "broken.png";
  score = 20
  console.log("You have recieved " + score)
}

function changeImage2() {
  document.getElementById("image1").src = "house.png";
  document.getElementById("image2").src = "iron.png";
  document.getElementById("image3").src = "iron.png";
  score = 50
  console.log(score)
}

function changeImage3() {
  document.getElementById("image1").src = "iron.png";
  document.getElementById("image2").src = "diamond.png";
  document.getElementById("image3").src = "gold.png";
  score = 0
  console.log(score)
}

var time = 10;

HTML代码 #

<center>
  <h1>Win or Lose your Life?💀</h1>
</center>
<img alt="" src="pickaxe.png" style="height: 200px; width: 200px" id="image1" />
<button onClick="fadeOut()"><img src="button.png" id="button1" onclick="changeImage1()"/></button>

<img alt="" src="iron.png" style="height: 200px; width: 250px" id="image2" />
<button onClick="fadeOut()"><img src="button.png" id="button2" onclick="changeImage2()"/></button>

<img alt="" src="Diamond.png" style="height: 200px; width: 200px" id="image3" />
<button onClick="fadeOut()"><img src="button.png" id="button3" onclick="changeImage3()"/></button>

问题原因 #

1. 未实现fadeOut/fadeIn函数：代码中调用了fadeOut()但没有定义该函数，原生JavaScript没有内置的淡入淡出方法。
2. 点击事件冲突：按钮和内部<img>都绑定了点击事件，触发逻辑混乱，且未将动画与图片切换关联。
3. 无动画等待机制：现有代码直接切换图片src，没有等待淡出动画结束就执行切换，导致动画逻辑失效。

解决方案 #

1. 添加CSS过渡样式 #

给图片添加平滑过渡效果，简化动画控制：

.image-item {
  transition: opacity 0.5s ease; /* 0.5秒完成透明度过渡 */
}

2. 重写JavaScript逻辑，整合动画与图片切换 #

实现动画逻辑，将图片切换与淡入淡出绑定：

var score = 0;
const transitionTime = 500; // 与CSS过渡时长保持一致

// 通用图片切换+动画函数
function switchImages(imageChanges, newScore) {
  // 让所有目标图片淡出
  const imageIds = Object.keys(imageChanges);
  imageIds.forEach(id => {
    const img = document.getElementById(id);
    img.style.opacity = 0;
  });

  // 等待淡出完成后切换图片并淡入
  setTimeout(() => {
    imageIds.forEach(id => {
      const img = document.getElementById(id);
      img.src = imageChanges[id];
      img.style.opacity = 1;
    });
    score = newScore;
    console.log(newScore === 20 ? `You have recieved ${score}` : score);
  }, transitionTime);
}

// 按钮点击事件处理函数
function handleButton1Click() {
  switchImages({
    image1: "gold.png",
    image2: "broken.png",
    image3: "broken.png"
  }, 20);
}

function handleButton2Click() {
  switchImages({
    image1: "house.png",
    image2: "iron.png",
    image3: "iron.png"
  }, 50);
}

function handleButton3Click() {
  switchImages({
    image1: "iron.png",
    image2: "diamond.png",
    image3: "gold.png"
  }, 0);
}

3. 修改HTML，修复事件冲突 #

移除内部img的点击事件，统一绑定到按钮上，并给图片添加CSS类：

<style>
  .image-item {
    transition: opacity 0.5s ease;
  }
</style>
<center>
  <h1>Win or Lose your Life?💀</h1>
</center>
<img alt="" src="pickaxe.png" style="height: 200px; width: 200px" id="image1" class="image-item" />
<button onclick="handleButton1Click()"><img src="button.png" id="button1"/></button>

<img alt="" src="iron.png" style="height: 200px; width: 250px" id="image2" class="image-item" />
<button onclick="handleButton2Click()"><img src="button.png" id="button2"/></button>

<img alt="" src="Diamond.png" style="height: 200px; width: 200px" id="image3" class="image-item" />
<button onclick="handleButton3Click()"><img src="button.png" id="button3"/></button>

说明 #

• 用CSS transition属性实现平滑透明度变化，避免手动编写复杂动画帧。
• 通过setTimeout等待淡出动画完成后再执行图片切换和淡入，保证动画顺序正确。
• 统一按钮点击事件，解决冲突问题，同时封装通用函数减少重复代码。

内容的提问来源于stack exchange，提问作者badatcoding