Javascript 在点击按钮时将两个图像相互淡入淡出？

我正在尝试创建一个横幅广告。有一个折叠版本有一个展开按钮，然后扩展，更大的版本有一个折叠按钮返回到它以前的状态。我被要求在不使用外部javascript库的情况下执行此操作，并且只使用JS和CSS。我现在正试图用JS和CSS动画来做这件事，但我有一段艰难的时光。谁能告诉我我做错了什么，并帮助我走上解决问题的道路

}

我可以让第一个图像淡出，但我似乎无法让第二个图像淡入

---

编辑：所以，我有来回切换的图像，但这对我来说从来都不是一个问题。。。我遇到的问题是，通过使用CSS转换的点击按钮，使它们彼此淡入。有人能帮忙吗？

第二个图像保持隐藏的原因是

document.getElementById（“myImg2”）。display

什么都不做，并且您为

\myImg2

编写的css规则仍然存在。尝试改为

document.getElementById（“myImg2”）.style.display

，您将看到元素显示块。不过，我不确定是否会褪色。第二个图像保持隐藏的原因是

document.getElementById（“myImg2”）.display

不起任何作用，并且您为

#myImg2

编写的css规则保持不变。尝试改为

document.getElementById（“myImg2”）.style.display

，您将看到元素显示块。不过，我不确定是否会褪色。这似乎不合适。

对于初学者，您需要为css属性指定.style.property。如果您检查codepen链接，我很确定我已经设置了css样式属性。我将myImg2的显示设置为“无”，将myImg的显示设置为“块”。我有什么地方做错了吗？编辑：天哪，我觉得自己好笨。。。我现在明白你的意思了。我让他们改变了，但现在褪色已经消失了。。。我怎样才能让它们适当地褪色？你可以使用Css（和一点js）来做到这一点，如果我是你，我会在你的横幅广告的容器上添加一个名为“clicked”的类，当它被点击时，然后用不透明、绝对定位等来做所有褪色的事情，您需要为css属性指定.style.property。如果您检查codepen链接，我很确定我已经设置了css样式属性。我将myImg2的显示设置为“无”，将myImg的显示设置为“块”。我有什么地方做错了吗？编辑：天哪，我觉得自己好笨。。。我现在明白你的意思了。我让他们改变了，但现在褪色已经消失了。。。我怎样才能让它们适当地褪色？你可以使用Css（和一点js）来做到这一点，如果我是你，我会在你的横幅广告的容器上添加一个名为“clicked”的类，当它被点击时，然后用不透明、绝对定位等来做所有褪色的事情。

function fade(btnElement) {


if (btnElement.id == "expandButton"){
    console.log("expand!");
    document.getElementById("myImg").className = "fade-out";
    document.getElementById("myImg").display = "none";
    document.getElementById("myImg2").display = "block";
    document.getElementById("myImg2").className = "fade-in";
    console.log(document.getElementById("myImg2").display);



}

else {
    document.getElementById("myImg2").className = "fade-in";
    btnElement.value = "Fade Out";
}