javascript - 如何为图像框创建翻转？

Question

我有一个容器(宽度 500 像素，高度 800 像素)。容器使用图像作为背景，我想在中间添加一个按钮，上面写着“注册”。当用户点击注册按钮时，我想要一个在同一个容器中弹出的注册表单。

换句话说，我需要一种翻转效果，其中背景颜色会更改为其他颜色，并且同一容器用于注册框。而且我需要保留转换，直到用户点击关闭按钮或类似按钮。

我怎样才能做到这一点？任何想法将不胜感激。谢谢!

Answer 1

您可以将 2 个容器放在彼此的顶部，然后淡入/淡出顶部的容器 - DEMO

HTML

<section>
    <div id="lower">
        <button> Close </button>
    </div>

    <div id="upper">
        <button> Sign up </button>
    </div>
</section>

CSS

div {
    position: absolute;
    left: 20px;
    top: 20px;
    height: 300px;
    width: 400px;
    line-height: 300px;
    text-align: center;
}

#lower { background: honeydew; }
#upper { background: beige; }

jQuery

$("#upper button").on("click", function() {
    $("#upper").fadeOut(300);
});


$("#lower button").on("click", function() {
    $("#upper").fadeIn(300);
});