오류시 JQuery 흔들기 효과

사용자가 잘못된 정보를 입력하면 로그인 페이지에 흔들기 효과를 적용하려고합니다. 잠시 후 사용자가 잘못된 세부 정보를 제출하면 페이지가 새로 고쳐져 PHP 알림이 인쇄되고 알림 div가 JS를 통해 표시됩니다. 정보가 잘못되었다는 표시로 알림이 표시되고 흔들기 효과가 토글되도록 사용하려고합니다. 페이지 리로드오류시 JQuery 흔들기 효과

<div class='notification'>Sign in unsuccessful. Try again?</div>

$('document').ready(function() { 
    $('.notification').hide(); 
    $('.notification').slideDown(); 
    if ($('.notification').is(':visible')) { 
     $('.form-container').effect("shake"); 
    } 
});

출처

2014-05-17 Anonymous

jQuery UI 라이브러리가 포함되어 있습니까?

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

페이지에 알림 div가 없으면 jQuery로 정리할 수도 있습니다. div의 CSS 또는 PHP echo에서 display : none; 및 통지의 div는이를 사용

$(document).ready(function() { 
    if ($(".notification").length) { 
     $(".notification").slideDown("fast",function() { 
      $(".form-container").effect("shake"); 
     }); 
    } 
});

출처

2014-05-17 21:19:50 princessjackie

이러한 이벤트는 동시에 소성하면 다음과

<div class="form-container"> 
    <form action="index.php" method="post"> 
     <div class="logo"></div> 
     <p> 
      Sign into <i>Agito</i> by using the credentials you were sent via email. If you haven't signed up yet, click the link below. 
     </p> 

     <div class="pre-user"> 
      <img src="../resources/img/user.png"> 
     </div> 
     <input type="text" placeholder="Username" name="username"/> 
     <div class="pre-pass"> 
      <img src="../resources/img/password.png"> 
     </div> 
     <input type="password" placeholder="Password" name="password"/> 
     <a href="#">Haven't signed up yet?</a> 
     <input type="submit" value="Sign in"/> 
    </form> 
</div>

HTML 인쇄된다. setTimeout()을 사용하여 500ms 또는 그와 비슷한 시간 내에 실행되도록 할 수 있습니다. 당신은 가능성이보다 더과 같이 순서대로 그들을 해고 콜백을 사용할 수 있습니다 : 이것은 체인 사용하고 콜백됩니다

$('.notification').hide(250, function(){ 
    $('.notification').slideDown(250); 
    $('.form-container').effect('shake'); 
});

더 제어 영지에서 이벤트를 트리거 할 수 있습니다.

출처

2014-05-17 21:18:55 LindleyW

이 시도 :

는

function shakeElement(element){ 
    element.addClass('shake'); 
    setTimeout(function(){ 
     element.removeClass('shake'); 
    },2100); 
};

그런 다음 CSS :

if (!phone.length > 0) { 
    shakeElement($signupPhoneInput); 
    showAlert('error','Please enter your phone number.'); 
    $signupPhoneInput.focus(); 
    return false; 
}

: 여기

@-webkit-keyframes spaceboots { 
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } 
} 
.shake { 
display: inline-block; 
    -webkit-animation-name: spaceboots; 
    -webkit-animation-duration: 0.8s; 
    -moz-transform-origin: 50% 50%; 
    -ms-transform-origin: 50% 50%; 
    -o-transform-origin: 50% 50%; 
    -webkit-transform-origin: 50% 50%; 
    transform-origin: 50% 50%; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear 
}

은 예입니다

출처

2014-08-07 10:35:43 kaleazy

오류시 JQuery 흔들기 효과

답변

관련 문제