JQuery抖动对错误的影响答案

【问题标题】：JQuery shake effect on errorJQuery抖动对错误的影响
【发布时间】：2014-05-17 21:07:07
【问题描述】：

当用户输入错误信息时，我正在尝试对我的登录页面应用抖动效果。此时，如果用户提交了不正确的详细信息，则页面会刷新，并打印 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" );
    }
});

【问题讨论】：

标签： javascript php jquery html

【解决方案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;
}

【讨论】：

【解决方案2】：

您是否包含 jQuery UI 库？

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

如果通知 div 最初在您的页面上不存在，您也可以使用 jQuery 进行整理。在您的 div 的 CSS 或 PHP 回显中，您可以指定 display:none;对于通知 div 并使用它：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：