Question

我被要求为项目创建一个登录框的原型，目的是模拟AJAX-y登录框的方式。

想法是：

用户名/密码中的用户类型（任何;再次，这并未连接到任何数据库或其他任何数据库）并点击输入
Throbber出现3秒钟。
出现用户信息。

我已尝试使用jQuery执行此操作，如下所示;谁都知道我做错了什么？非常感谢！

<html>
    <head>
        <link href="c/main.css" media="screen" rel="stylesheet" type="text/css" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
        <!--[if lte ie7]>
        #header #logo {margin-right: 100px;}
        <!-[endif]--> 
                <script type="text/javascript">
            jQuery(document).ready(function(){
                jQuery('#login-form').submit(function(){
                    jQuery('#login-form > *').hide();
                    jQuery('#throbber').show().delay(300).hide();
                    jQuery('#logged-in').show();
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id="utilities"><a href="">Volunteer</a><a href="">About Us</a><input type="text" /></div>
            <div id="header">
                <img src="i/logo.png" id="logo" />
                <div id="pnav-wrapper">
                    <ul id="pnav">
                        <li><a href="#">Upgrade Your<br /><span>Skills</span></a></li>
                        <li><a href="#">Browse<br /><span>Events</span></a></li>
                        <li><a href="#">Browse<br /><span>Jobs</span></a></li>
                    </ul>
                    <div id="login">
                        <form action="#" method="get" id="login-form">
                        Username: <input id="username" type="text" /><br />
                        Password:&nbsp; <input id="password" type="password" />
                        <input type="submit" style="visibility: hidden;">
                        </form>
                        <img src="i/throbber.gif" style="display: none;" id="throbber">
                        <p id="logged-in" style="display: none;"><strong>The Admin</strong><br />
                        Administrator
                        </p>
                    </div>
                </div>
            </div>
            <div id="content"></div>
        </div>
    </body>
</html>

Answer 1

delay()仅影响#throbber的队列（300为0.3秒）。

相反，在隐藏 .hide()之后，使用#logged-in的回调来显示#throbber ：

jQuery('#login-form').submit(function() { jQuery('#login-form > *').hide(); jQuery('#throbber').show().delay(3000).hide(function() { jQuery('#logged-in').show(); }); return false; });

（demo）

Answer 2

你需要将延迟更改为3000，使整个登录表单隐藏而不仅仅是子元素，这部分是关键...将登录的显示代码放在回调函数中，以便在throbber之后执行隐藏......像这样：

jQuery('#login-form').submit(function(){
    jQuery('#login-form').hide();
    jQuery('#throbber').show().delay(3000).hide(function(){
        jQuery('#logged-in').show();
    });
    return false;
});

Answer 3

试试这个：http://jsfiddle.net/dbhCe/

jQuery(document).ready(function(){
            jQuery('#login-form').submit(function(){
                jQuery('#login-form').hide();

                jQuery('#throbber').show();

                window.setTimeout( function() {
                    jQuery("#throbber").hide();
                    jQuery('#logged-in').show();
                }, 3000);
                return false;
            });
        });

Answer 4

这是一个演示

http://jsfiddle.net/6UwDn/2/

伪造一个AJAX-y登录框

4 个答案: