त्रुटि

Question

पर लॉगिन फ़ॉर्म को कैसे हिलाएं मेरे पास HTML और CSS के साथ एक लॉगिन पृष्ठ है। यह पूरी तरह कार्यात्मक है और वह सब कुछ है। हालांकि, जब लॉगिन विफल रहता है तो मैं लॉगिन फॉर्म को हिला देना चाहता हूं। मैं इसे कैसे हिला सकता हूँ। अभी, यह कुछ भी नहीं करता है।

यहां मेरा HTML/CSS/जावास्क्रिप्ट है। यदि अधिक कोड की आवश्यकता है, तो कृपया मुझे बताएं।

एचटीएमएल

<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=""> 

सीएसएस

.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; 
} 

जावास्क्रिप्ट

$('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 यूआई शामिल

<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; 
} 

जे एस

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

Answer 3

मैं वास्तव में, यहाँ सादे जावास्क्रिप्ट का उपयोग करने की सलाह देते इसे सरल रखें, लेकिन एक ही पर भी आसान नहीं होता। न केवल 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>