Ho una pagina di accesso con HTML e CSS. È perfettamente funzionante e tutto il resto. Tuttavia, quando l'accesso fallisce, voglio che il modulo di login si scuota. Come faccio a farlo tremare. In questo momento, non fa nulla.Come scuotere il modulo di login per errore
Ecco il mio codice HTML/CSS/JavaScript. Se è necessario più codice, per favore dimmelo.
HTML
<div class="input">
<c:if test="${not empty error}">
<div class="error">${error}</div>
</c:if>
<c:if test="${not empty msg}">
<div class="msg">${msg}</div>
</c:if>
<div class="email">
<input type="text" name="username"
placeholder="[email protected]"></input>
</div>
<div class="password">
<input type="password" name="password" placeholder="*********"></input>
</div>
</div>
<input class="login_btn" type="submit" name="submit" value="">
CSS
.container .login_component .login_wrap .login_wp .input input {
width: 290px;
height: 50px;
padding-left: 20px;
font-size: 15px;
border: none;
background: transparent;
}
.container .login_component .login_wrap .login_wp .input .email {
height: 53px;
margin-top: 20px;
background:
url("http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/input.png");
background-repeat: no-repeat;
background-position: center center;
}
.container .login_component .login_wrap .login_wp .input .password {
height: 53px;
margin-top: 20px;
background:
url("http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/input.png");
background-repeat: no-repeat;
background-position: center center;
}
.container .login_component .login_wrap .login_wp .login_btn {
height: 55px;
margin-top: 30px;
background:
url("http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/login_btn.png");
background-repeat: no-repeat;
background-position: center center;
border: none;
width: 310px;
}
JavaScript
$('input[type=submit]').on('click', function(e){
e.preventDefault();
$('.input').addClass('ahashakeheartache');
});
$('.input').on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e){
$('.input').delay(200).removeClass('ahashakeheartache');
});
Potrebbe essere più facile per le persone a rispondere, senza dover scavare per un grande pezzo di codice prima. Se il codice * real * non è realmente necessario, potrebbe essere meglio dare un esempio molto semplice o addirittura lasciare il codice completamente. :) – JakeTheSnake