我正在尝试制作横幅广告。有一个折叠的版本,它带有一个扩展按钮,然后展开的更大的版本具有一个折叠按钮,可以返回到其先前的状态。有人要求我不要使用外部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/