JQuery震动对错误的影响 - JQuery shake effect on error

JQuery shake effect on error

本文关键字：影响错误 JQuery | 更新日期: 2023-09-27

当用户输入不正确的信息时，我试图将震动效果应用于我的登录页面。此时，如果用户提交了不正确的详细信息，则刷新页面，打印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>

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

试试这个:

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

是否包含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");
        });
    }
});

这些事件同时触发。您可能希望setTimeout()使它们在500毫秒内触发或类似的东西。您很可能可以使用回调来按如下顺序触发它们:

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

这是使用链接和回调来触发事件在一个更可控的庄园。