褪色的两个图像到对方的按钮单击

Fading two images into each other on button click?

本文关键字：按钮 单击 图像 两个 褪色      更新时间：2023-09-26

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

这是我正在运行的代码的链接。

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

}

我可以让第一张图像淡出，但我似乎不能让第二张图像淡出…

编辑:所以，我有图像来回切换，但这对我来说从来没有真正的问题…我遇到的问题是通过使用CSS转换的按钮点击使它们彼此褪色。有人能帮忙吗?

第二个图像保持隐藏的原因是因为document.getElementById("myImg2").display没有做任何事情，而您为#myImg2编写的css规则仍然存在。尝试代替document.getElementById("myImg2").style.display，你将元素显示块。但不确定是否会褪色。

相关文章：