我正在尝试制作横幅广告。有一个折叠的版本,它带有一个扩展按钮,然后展开的更大的版本具有一个折叠按钮,可以返回到其先前的状态。有人要求我不要使用外部javascript库,而只能使用JS和CSS。我现在正在尝试使用JS和CSS动画来实现,但是我遇到了困难。谁能告诉我我在做什么错,并帮助我解决问题?

Here's a link to the code I have going now.

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,您将显示元素显示块。虽然不确定褪色。这似乎工作不正常。

关于javascript - 单击按钮使两幅图像彼此褪色?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33006047/

10-12 12:48
查看更多