如何晃動登錄表單出錯

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>