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

Answer 2

这些事件同时发射。您可能希望setTimeout（）它们在500毫秒内触发或类似的东西。您很可能可以使用回调来按照这样的顺序触发它们：

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

这是使用链接和回调来触发更具控制力的庄园中的事件。

Answer 3

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

JQuery震动对错误的影响

3 个答案: