Question

我正在尝试制作横幅广告。这是一个折叠版本，有一个展开按钮，然后展开的更大的版本有一个折叠按钮，可以回到它之前的状态。我已被要求在不使用外部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过渡使它们相互淡入淡出。有人可以帮忙吗？

Answer 1

第二张图片保持隐藏的原因是因为document.getElementById("myImg2").display什么都不做，而且您为#myImg2编写的css规则仍然存在。尝试改为document.getElementById("myImg2").style.display并且您将获得元素显示块。虽然不确定褪色。这似乎没有适当的工作。

点击按钮时，将两个图像相互淡化？

1 个答案: