JQuery 登录 div

Question

我正在尝试制作一个 JQuery 登录 div。您只需单击一个按钮，然后就会出现一个 100% 宽度/高度的背景，并带有一个中心 div ...我可以让它出现并消失，给它上课并显示......但我想要一些动画......它不起作用:(

HTML5

<div id="background_login">
        <div id="login_container">
            <div class="container"><a id="cerrar_login" class="btn"><span class="icon close"></span></a></div>
            <div class="formulario">
                <h1>Acceso</h1>
                <form action="" method="POST">
                    <input type="text" id="nombre_usuario" placeholder="Usuario" />
                    <input type="password" id="password" placeholder="Contraseña" />
                    <input type="submit" id="boton_conectar" value="Conectar" class="btn" />

                    <a>¿Has olvidado la contraseña?</a>
                    <a>Regístrate ahora</a>
                </form>
            </div>
        </div>
    </div>

CSS3

    #background_login {
    background: rgba(0, 0, 0, 0.2);
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 99999;
}

#login_container {
    background-color: #FFF;
    border-bottom: 4px solid #252328;
    height: auto;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 20%;
    width: 20%;
}

#login_container .container {
    background-color: #252328;
    height: 50px;
    width: 100%;
}

#login_container .container a {
    border-left: 1px solid #FFF;
    height: 50px;
    position: absolute;
    right: 0;
    width: 50px;
}

#login_container .container a:hover { background-color: #EA504E; }

#login_container .container a:hover span {
    -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
            transform: rotate(360deg);
}

#login_container .container a span {
    background-image: url("../images/menu.svg");
    background-position: 0 -16px;

    -webkit-transition: -webkit-transform .30s ease-out 0s;
            transition: transform .30s ease-out 0s;
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
}

#login_container .formulario {
    height: auto;
    padding-top: 20px;
    padding: 50px;
    width: auto;
}

#login_container .formulario h1 {
    color: #333;
    font-family: CaviarDreams_Bold;  
    font-size: 2em;
}

#login_container .formulario input {
    display: block;
    font-family: CaviarDreams_Bold;
    margin: 20px;
    margin-left: 0;
    padding: 12px;
    padding-right: 0;
    width: 94%;
}

#login_container .formulario input:focus { border-color: #252328; }

#login_container .formulario #boton_conectar {
    background-color: #252328;
    color: #FFF;
    font-family: CaviarDreams_Bold;
    font-size: 0.9em;
    padding: 0;
    width: 100%;
}

#login_container .formulario a {
    display: block;
    font-family: CaviarDreams_Bold;
    font-size: 0.9em;
}

#login_container .formulario #boton_conectar:hover { background-color: #EA504E; }

还有 Jquery 函数...您单击按钮，背景出现，里面有 div...

$('#login').click(function() { $('background_login').fadeIn('slow'); });
$('#cerrar_login').click(function() { $('background_login').hide( 1000 ); });

Answer 1

您的 html 中没有提供 #login，看来您可能需要创建它。但是，您的淡入淡出选择器绝对不正确。

$(function() {
    $('#login').on('click', function() { 
        $('#background_login').fadeIn('slow'); 
    });
    $('#cerrar_login').on('click', function() { 
        $('#background_login').hide( 1000 ); 
    });
});