javascript - JQuery 抖动对错误的影响

Question

当用户输入不正确的信息时，我尝试在我的登录页面上应用摇动效果。此时，如果用户提交了不正确的详细信息，页面将刷新，打印 PHP 通知，并通过 JS 使通知 div 可见。我正在尝试使用变得可见的通知来识别信息不正确并切换摇动效果。

HTML

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

页面重新加载时打印以下内容

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

JS

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

Answer 1

试试这个:

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

然后是CSS:

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

这是一个例子:

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