JQuery抖动对错误的影响 [英] JQuery shake effect on error

问题描述

我试图在用户输入不正确的信息时将抖动效果应用到我的登录页面。当时，如果用户提交不正确的详细信息，页面将刷新，打印PHP通知，并通过JS显示通知div。我试图使用通知变得可见，因为认识到信息不正确并切换摇动效果。

HTML

 < div class =form-container> 
< form action =index.phpmethod =post> 
< div class =logo>< / div> 
< p> 
登录到< i> Agito< / i>通过使用您通过电子邮件发送的凭据。如果您还没有注册，请点击下面的链接。 
< / p> 
 
< div class =pre-user> 
< img src =../ resources / img / user.png> 
< / div> 
< input type =textplaceholder =Usernamename =username/> 
< div class =pre-pass> 
< img src =../ resources / img / password.png> 
< / div> 
< input type =passwordplaceholder =Passwordname =password/> 
< a href =＃>尚未注册？< / a> 
< input type =submitvalue =Sign in/> 
< / form> 
< / div> 
  

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

 < div class ='notification'>登入失败。再试一次？< / div> 
  

JS
< pre $（'。'）。$（'。'）。$（'。'）。 ）.slideDown（）;
if（$（'。notification'）。is（'：visible'））{
$（'。form-container'）。effect（shake）;
}
}）;

解决方案

您是否包含jQuery UI库？

 < script src =// code.jquery.com/ui/1.10.4/jquery-ui.js\">< ; /脚本> 
  

如果通知div最初不存在于您的网页上，您也可以使用jQuery的。在div的CSS或PHP回显中，可以指定display：none;对于通知div和使用这个：

$ $ p $ $ $ $ $（document）.ready（function（）{
if（$ （.notification）。length）{
$（。notification）。slideDown（fast，function（）{
$（。form-container）。effect（shake ）;
}）;
}
}）;

I'm trying to apply a shake effect to my login page when a user enters incorrect information. At the minute, if a user submits incorrect details, the page is refreshed a PHP notification is printed and the notification div is made visible via JS. I'm trying to use the notification becoming visible as recognition that the information is incorrect and toggle the shake effect.

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>

with the following being printed when the page reloads

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

解决方案

Are you including the jQuery UI library?

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

If the notification div doesn't exist initially on your page, you could also tidy up things with your jQuery. In your CSS or PHP echo of the div, you can specify display:none; for the notification div and use this:

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

这篇关于JQuery抖动对错误的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！