JQuery登錄div

Question

我試圖做一個JQuery登錄div。你只需要點擊一個按鈕，然後，一個100％寬度/高度的背景會出現一箇中心分隔線...... 我可以讓它出現並消散給它一個類並顯示......但我想要一些動畫.. 。 它不工作:(

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函數...你在點擊該按鈕，背景似乎與裏面的股利。 ..

$('#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); 
    }); 
}); 

Answer 2

也許這個..

$('#background_login').fadeIn('slow'); 
$('#background_login').hide(1000);