Как встряхнуть регистрационную форму при ошибке

Question

У меня есть страница входа с HTML и CSS. Он полностью функциональный и все такое. Однако при неудачном входе в систему я хочу, чтобы форма входа в систему дрожала. Как заставить его встряхнуть. Сейчас он ничего не делает.

Вот мой HTML/CSS/JavaScript. Если требуется больше кода, пожалуйста, скажите мне.

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="Example@email.com"></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'); 
}); 

Answer 1

Использовать простой анимации в Jquery включают Jquery UI

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

    $(document).on('click', '#yoursubmitdiv', function(){ 

    //code if login fails 

     $("#yourloginfield").effect("shake"); // this will shake your div 



    }); 

Answer 2

Если вы используете animate.css, вы можете создать этот эффект. Вот проект github, где вы можете скачать исходный код. Есть и другие эффекты, которые вы можете проверить.

Код для встряхивания от animate.css:

.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

.animated.infinite { 
    -webkit-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
} 

.animated.hinge { 
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
} 

.animated.bounceIn, 
.animated.bounceOut { 
    -webkit-animation-duration: .75s; 
    animation-duration: .75s; 
} 

.animated.flipOutX, 
.animated.flipOutY { 
    -webkit-animation-duration: .75s; 
    animation-duration: .75s; 
} 

@-webkit-keyframes shake { 
    from, to { 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    } 

    10%, 30%, 50%, 70%, 90% { 
    -webkit-transform: translate3d(-10px, 0, 0); 
    transform: translate3d(-10px, 0, 0); 
    } 

    20%, 40%, 60%, 80% { 
    -webkit-transform: translate3d(10px, 0, 0); 
    transform: translate3d(10px, 0, 0); 
    } 
} 

@keyframes shake { 
    from, to { 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    } 

    10%, 30%, 50%, 70%, 90% { 
    -webkit-transform: translate3d(-10px, 0, 0); 
    transform: translate3d(-10px, 0, 0); 
    } 

    20%, 40%, 60%, 80% { 
    -webkit-transform: translate3d(10px, 0, 0); 
    transform: translate3d(10px, 0, 0); 
    } 
} 

.shake { 
    -webkit-animation-name: shake; 
    animation-name: shake; 
} 

JS

$(document).ready(function(){ 
    $('.submit').click(function(e){ 
     // Code to check login 
     // If fail 
     $('.input').addClass('animated shake'); 
    }); 
}) 

Answer 3

Я бы на самом деле рекомендую использовать простой Javascript здесь, держать его простой, но в то же не слишком просто. Не только shake, но не 50 строк кода. Пожалуйста, спросите, не что-то неясно с кодом, постарался сохранить его как можно более компактным.

var box1Left1 = 100, box1Left2, keepShaking = true; 
 
var originalLeftPos = parseInt(document.getElementById("box1").style.left); 
 
    
 
setTimeout(stopShake, 1000); //Shake for how long 
 
function stopShake() { keepShaking = false; } 
 
    
 
setInterval(shake, 10); //Set shorter interval for faster shake 
 
function shake() { 
 
    if (keepShaking == true) { 
 
    if (box1Left1 < originalLeftPos + 5) { // "+5" = The shake distance. Go right. 
 
     box1Left1++; 
 
     document.getElementById("box1").style.left = box1Left1 + "px"; 
 
     box1Left2 = box1Left1; 
 
    } 
 
    if (box1Left1 >= (originalLeftPos + 5)) { // Go left. 
 
     box1Left2--; 
 
     document.getElementById("box1").style.left = box1Left2 + "px"; 
 
    } 
 
    if(box1Left2 == originalLeftPos) { box1Left1 = box1Left2; } // Go Right Again 
 
    } 
 
}

<div id="box1" style="position:absolute; top: 10px; left: 100px; width: 100px; height: 50px; background-color: #aa39fc;"> 
 
    Incorrect Password 
 
</div>