Question

我想用jQuery创建动画登录，sigup和忘记密码。

中找到了这个想法

我创造了艰苦的工作，但我仍然无法显示忘记密码的div。

我有3个div：登录，注册并忘记;

这里是完整的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

    $(".login").hide();
    $(".forgot").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".login").slideToggle("slow");  });

    $('.show_hide').click(function(){
    $(".signup").slideToggle("slow");  });

});

</script>
<style type="text/css">
.login, .signup, .forgot {
    height:300px;
    width:400px;
    padding:20px;
    margin-top:10px;
}

.show_hide {
    display:none;
}
</style>
</head>
<body>

    <div class="signup">
        <form id="login_voxio" method="post" action="http://vox.io/auth.localauthentication/authenticate">
        <div>
            <h2>New to vox.io? <a href="#" class="show_hide">Sign up</a></h2>
            <h3>Login</h3>
        </div>
        <fieldset>
            <div>
                <span class="input">Username or email</span>
                <input class="input" type="text" id="username" name="username" value="" autocomplete="off" />
            </div>
            <div class="l">
                <span class="input">Password</span>
                <input class="input" type="password" id="password" name="password" value="" autocomplete="off" />
            </div>
            <input type="submit" class="mac_arrow" id="signin" name="signin" value="Sign in" />
            <input type="hidden" id="type" name="type" value="LOCAL" />
        </fieldset>
        <a href="#" class="show_hide">Forgot password?</a>
    </form>
        <div class="forgot" id="#forgot">
        <form id="login_forgot" method="post" action="http://vox.io/authentication/forgot">
            <div>
                <h2>New to vox.io? <a class="show_hide">Sign up</a></h2>
                <h3>Your recovery email address</h3>
            </div>
            <fieldset>
                <div class="l">
                    <span class="input">Email Address</span>
                    <input class="input" type="text" id="femail" name="femail" value="" />
                </div>
                <input class="mac_arrow" type="submit" id="send-instructions" name="send-instructions" value="Send instructions">
            </fieldset>
        </form>
      </div>
    </div>
    <div class="login">
        <form id="login_register" method="post" action="http://vox.io/signup/saveaccount">
            <div>
                <h2>Already a member? <a href="#" class="show_hide">Log in</a></h2>
                <h3>Sign up</h3>
            </div>
            <fieldset>
                <div class="login_register_anim">
                    <span class="input">Full name</span>
                    <input class="input" type="text" id="name" name="acc.name" value="" maxlength="36" autocomplete="off" />
                </div>
                <div>
                    <span class="input">Username</span>
                    <input class="input" type="text" id="username_register" name="acc.username" value="" maxlength="16" autocomplete="off" />
                </div>
                <div>
                    <span class="input">Password</span>
                    <input class="input" type="password" id="password1" name="acc.password" value="" autocomplete="off" />
                </div>
                <div class="login_register_anim">
                    <span class="input">Email Address</span>
                    <input class="input" type="text" id="email" name="acc.emails[0].email" value="" autocomplete="off" />
                </div>
                <div class="l login_register_anim">
                    <select class="select selectBox" id="country" name="acc.country">
                        <option value="AF" title="+93" class="AF">Afghanistan</option>
                        <option value="AL" title="+355" class="AL">Albania</option>
                        <option value="DZ" title="+213" class="DZ">Algeria</option>
                        <option value="AS" title="+1684" class="AS">American Samoa</option>
                        <option value="AD" title="+376" class="AD">Andorra</option>
                        <option value="TN" title="+216" class="TN" selected="selected">Tunisia</option>
                        <option value="TR" title="+90" class="TR">Turkey</option>
                        <option value="TM" title="+993" class="TM">Turkmenistan</option>
                        <option value="TC" title="+1649" class="TC">Turks and Caicos Islands</option>
                        <option value="TV" title="+688" class="TV">Tuvalu</option>
                    </select>
                </div>
                <input class="login_register_anim button_blue" type="submit" id="register_submit" name="register_submit" value="Sign up" />
            </fieldset>
        </form>
    </div>
</body>
</html>

我怎样才能改变动画（如淡入）？

Answer 1

在您喜欢的网站上，有一个非混淆的文件，网站用它来实现您想要的功能（http://vox.io/public/a0ea2e1a63/static/js/Authentication/login.js）

所以你有一个工作示例的所有javascript。所以重新开始吧！

只需使用其网站上的源代码作为示例。逆向工程应该很容易 - 只需从示例应用程序开始......然后将源代码的关键部分移动到您的应用程序中。一块一块。在迭代中测试它。

1）添加表格 2）添加动画 3）等。

特别是搜索.animate并观察他们是如何做到的：

这是他们的代码：

(function($) {
  $('.selectBox').customStyle();

  $('#username_register').blur(function() {
    var value = $.trim($(this).val());

    if (value !== '') {
      $('#username').attr('value', value).blur();
    }
  });

  $('#username').blur(function() {
    var value = $.trim($(this).val());

    if (value !== '') {
      $('#username_register').attr('value', value).prev().hide();
    }
  });

  /*
   * Landing animations
   */
  var forms = $('#landing_forms > div > form');
  var animStarted = false;

  // Animation from signup process to vox.io login
  $('#change_login').click(function(ev) {
    if (animStarted === true) {
      return false;
    }

    animStarted = true;

    // Hide fields
    $('> div, > fieldset, > a', '#login_voxio').css('opacity', 0);
    $('#login_voxio #username').prev().css('opacity', 0);

    // Show form
    $('#login_voxio').show();

    // Hide h1 and h2
    $('> div', '#login_register').animate({
      'opacity': 0
    }, 'fast', function() {
      var i = 1, x = $('.login_register_anim').length;

      // Hide all input fields
      $('.login_register_anim').animate({
        'opacity': 0
      }, 'fast', function() {
        if (i >= x) {
          // Push up username and password
          $('#name').parent().slideUp('fast', function() {
            // Hide label
            $('#login_register #username_register').prev().animate({
              'opacity': 0
            }, 'fast');

            // Show label
            $('#login_voxio #username').prev().animate({
              'opacity': 1
            }, 'fast', function() {
              // Hide form
              $(forms).hide();
              // Show form
              $('#login_voxio').show();
              $('#login_voxio #username').focus();

              // Show and animate fields
              $('> fieldset', '#login_voxio').css('opacity', 1);

              $('> a', '#login_voxio').animate({
                'opacity': 1
              }, 'fast', function() {
                animStarted = false;
              });
            });
          });
        }

        i = i + 1;
      });
    });

    // Show h1 and h2
    $('> div', '#login_voxio').animate({
      'opacity': 1
    }, 'normal');
  });

  // Animation from vox.io login to signup process
  $('#change_signup').click(function(ev) {
    if (animStarted === true) {
      return false;
    }

    animStarted = true;

    // Hide fields
    $('> div', '#login_register').css('opacity', 0);
    $('> a', '#login_voxio').animate({
      'opacity': 0
    }, 'fast');

    // Show form
    $('#login_register').show();

    // Hide h1 and h2
    $('> div', '#login_voxio').animate({
      'opacity': 0
    }, 'normal', function() {
      // Hide label
      $('#login_voxio #username').prev().animate({
        'opacity': 0
      }, 'fast');

      $('> fieldset', '#login_register').css('opacity', 1);

      // Show label
      $('#login_register #username_register').prev().animate({
        'opacity': 1
      }, 'fast', function() {
        // Hide form
        $(forms).hide();
        // Show form
        $('#login_register').show();

        $('#name').parent().slideDown('fast', function() {
          var i = 1, x = $('.login_register_anim').length;

          $('.login_register_anim').animate({
            'opacity': 1
          }, 'fast', function() {
            if (i >= x) {
              animStarted = false;
            }

            i = i + 1;
          });
        });
      });
    });

    // Show h1 and h2
    $('> div', '#login_register').animate({
      'opacity': 1
    }, 'normal');
  });

  // Animation from vox.io login to social login
  $('#change_social').click(function(ev) {
    if (animStarted === true) {
      return false;
    }

    animStarted = true;

    // Hide fields
    $('> div, > a', '#login_social').css('opacity', 0);
    $('> fieldset', '#login_social').css('opacity', 1);

    $('#landing_forms > div > form img').css({
      'top': 20,
      'left': 20,
      'width': 0,
      'height': 0
    });

    // Show form
    $('#login_social').show();

    $('> a, > fieldset', '#login_voxio').animate({
      'opacity': 0
    }, 'fast');

    // Hide h1 and h2
    $('> div', '#login_voxio').animate({
      'opacity': 0
    }, 'normal', function() {
      $('> a', '#login_social').animate({
        'opacity': 1
      }, 'fast');

      $('> div', '#login_social').animate({
        'opacity': 1
      }, 100, function() {
        // Hide forms
        $(forms).hide();
        // Show form
        $('#login_social').show();

        var x = $('#landing_forms > div > form ul li img').length - 1;

        $.each($('#landing_forms > div > form ul li img'), function(i, img) {
          setTimeout(function() {
            $(img).animate({
              'width': 43,
              'height': 43,
              'top': 0,
              'left': 0
            }, 300, 'easeOutCubic', function() {
              $(this).animate({
                'width': 41,
                'height': 41,
                'top': 0,
                'left': 0
              }, 250, 'easeOutCubic', function() {
                if (i >= x) {
                  $('> div, > a, > fieldset', '#login_voxio').css('opacity', 1);

                  animStarted = false;
                }
              });
            });
          }, i * 80);
        });
      });
    });

    // Show h1 and h2
    $('> div', '#login_social').animate({
      'opacity': 1
    }, 'normal');
  });

  // Animation from social login to signup process
  $('#change_signup_social').click(function(ev) {
    if (animStarted === true) {
      return false;
    }

    animStarted = true;

    // Hide fields
    $('> div, > fieldset', '#login_register').css('opacity', 0);
    $('#login_register #username_register').prev().css('opacity', 1);

    // Show form
    $('#login_register').show();

    // Hide fields
    $('> a, > fieldset', '#login_social').animate({
      'opacity': 0
    }, 'fast');

    // Hide h1 and h2
    $('> div', '#login_social').animate({
      'opacity': 0
    }, 'normal', function() {
      $('#name').parent().show();
      $('.login_register_anim').css('opacity', 1).show();

      $('> fieldset', '#login_register').animate({
        'opacity': 1
      }, 'fast', function() {
        // Hide forms
        $(forms).hide();
        // Show form
        $('#login_register').show();
        animStarted = false;
      });
    });

    // Show h1 and h2
    $('> div', '#login_register').animate({
      'opacity': 1
    }, 'normal');
  });

  // Animation from social login to vox.io login
  $('#change_voxio').click(function(ev) {
    if (animStarted === true) {
      return false;
    }

    animStarted = true;

    // Hide fields
    $('> div, > a, > fieldset', '#login_voxio').css('opacity', 0);

    // Show form
    $('#login_voxio').show();

    // Hide fields
    $('> a, > fieldset', '#login_social').animate({
      'opacity': 0
    }, 'fast');

    // Hide h1 and h2
    $('> div', '#login_social').animate({
      'opacity': 0
    }, 'normal', function() {
      // Hide forms
      $(forms).hide();
      // Show form
      $('#login_voxio').show();

      $('> a', '#login_voxio').animate({
        'opacity': 1
      }, 'fast');

      $('> fieldset', '#login_voxio').animate({
        'opacity': 1
      }, 'fast', function() {
        animStarted = false;
      });
    });

    // Show h1 and h2
    $('> div', '#login_voxio').animate({
      'opacity': 1
    }, 'normal');
  });

  // Animation from vox.io login to forgot password process
  $('#change_forgot').click(function(ev) {
    if (animStarted === true) {
      return false;
    }

    animStarted = true;

    // Hide fields
    $('> div, > fieldset, > p, #send-instructions', '#login_forgot').css('opacity', 0);
    $('#login_forgot #femail').prev().css('opacity', 0);

    // Show form
    $('#login_forgot').show();

    // Hide fields
    $('> a', '#login_voxio').animate({
      'opacity': 0
    }, 'fast');

    // Hide h1 and h2
    $('> div', '#login_voxio').animate({
      'opacity': 0
    }, 'normal', function() {
      $('#password').parent().slideUp('fast', function() {
        $('#send-instructions').css('opacity', 1);

        $('> p', '#login_forgot').animate({
          'opacity': 1
        }, 'fast');

        $('#signin').animate({
          'bottom': 21
        }, 50, function() {
          $('> fieldset', '#login_forgot').css('opacity', 1);

          // Hide forms
          $(forms).hide();
          // Show form
          $('#login_forgot').show();
          $('#login_forgot #femail').focus();

          $('#signin').css('bottom', 8);

          // Hide label
          $('#login_voxio #username').prev().animate({
            'opacity': 0
          }, 'fast');

          // Show label
          $('#login_forgot #femail').prev().animate({
            'opacity': 1
          }, 'fast', function() {
            animStarted = false;
          });
        });
      });
    });

    // Show h1 and h2
    $('> div', '#login_forgot').animate({
      'opacity': 1
    }, 'normal');
  });

  // Animation from forgot password process to signup process
  $('#change_signup_forgot').click(function(ev) {
    if (animStarted === true) {
      return false;
    }

    animStarted = true;

    // Show fields
    $('#name').parent().show();
    $('#password').parent().show();
    $('> fieldset > div, #register_submit', '#login_register').css('opacity', 1);
    $('#login_register #username_register').prev().css('opacity', 1);

    // Hide fields
    $('> div, > fieldset', '#login_register').css('opacity', 1);

    // Show form
    $('#login_register').show();

    $('> p, > fieldset', '#login_forgot').animate({
      'opacity': 0
    }, 'fast');

    // Hide h1 and h2
    $('> div', '#login_forgot').animate({
      'opacity': 0
    }, 'normal', function() {
      // Hide forms
      $(forms).hide();
      // Show form
      $('#login_register').show();

      $('> fieldset', '#login_register').animate({
        'opacity': 1
      }, 'fast', function() {
        animStarted = false;
      });
    });

    // Show h1 and h2
    $('> div', '#login_register').animate({
      'opacity': 1
    }, 'normal');
  });

  /*
   * End of animations :)
   * Some other stuff we have to handle
   */
  // Sign up process
  var profile_form_data = function(input, status, pending) {
    $(input).data({
      'status': status,
      'pending': (pending !== undefined ? pending : false)
    });
  };

  $.each($('#login_register input.input'), function(i, input) {
    profile_form_data(input, false, false);
  });

  var form_validators = {
    email: function(value) {
      var email = /^([^@]+)@([^\s@.]([^\s@.]*\.[^\s@.]+)+)$/;

      return email.test(value);
    },
    username: function(input, value) {
      profile_form_data(input, false);

      if ($(input).data('status') === false && $(input).data('pending') === false) {
        profile_form_data(input, false, true);

        var div = $(input).parent();
        div.find('p').remove();

        $(input).removeClass('valid invalid');

        if (0 < value.length && value.length < 3) {
          $(input).addClass('invalid');

          div.append('<p>Username requires at least 3 characters.</p>');
        } else {
          $.ajax({
            'url': VoxioUrls.ajaxValidationUsername,
            'cache': false,
            'data': {
              'username': value
            },
            'success': function(data) {
              if (data === 'true') {
                profile_form_data(input, true);

                $(input).addClass('valid');

                div.append('<p class="success">Success</p>');

                if ($('#login_register').data('submitted') === true) {
                  $('#login_register').data('submitted', false).submit();
                }
              } else if (data === 'false') {
                profile_form_data(input, false);

                $(input).addClass('invalid');

                div.append('<p>Huh, this username is already in use.</p>');
              } else if (data === 'short') {
                profile_form_data(input, false);

                $(input).addClass('invalid');

                div.append('<p>Username requires at least 3 characters.</p>');
              }
            }
          });
        }
      }
    }
  };

  // name
//  var name_value = $.trim($('#login_register #name').val());

  $('#login_register #name').blur(function(e) {
    var value = $.trim($(this).val());
    var div = $(this).parent();

    div.find('p').remove();

    profile_form_data(this, false);

    $(this).removeClass('valid invalid');

    if (value !== '') {
      $(this).addClass('valid');
      div.append('<p class="success">Success</p>');
      profile_form_data(this, true);

      var v = $.trim($('#login_register #username_register').val());

      if (v === '' && value.length >= 3) {
        $.ajax({
          'url': VoxioUrls.ajaxRecommendUsername,
          'cache': false,
          'data': {
            'name': value
          },
          'dataType': 'json',
          'success': function(response) {
            if (response.username !== '' && $.trim($('#login_register #username_register').val()) === '') {
              $('#login_register #username_register').attr('value', response.username).keyup();
            }
          }
        });
      }
    }
  }).focus(function() {
    $(this).removeClass('valid invalid').parent().find('p').remove();

    profile_form_data(this, false);
  });

  // email
  $('#login_register #email').blur(function(e) {
    var value = $.trim($(this).val());
    var div = $(this).parent();

    div.find('p').remove();

    $(this).removeClass('valid invalid');
    profile_form_data(this, false);

    if (form_validators.email(value) === true) {
      $(this).addClass('valid');

      div.append('<p class="success">Success</p>');

      profile_form_data(this, true);
    } else if (value !== '') {
      $(this).addClass('invalid');

      div.append('<p>This does not appear to be a valid email.</p>');
    }
  }).focus(function() {
    profile_form_data(this, false);
  });

  // password
  $('#login_register #password1').blur(function(e) {
    var value = $.trim($(this).val());
    var div = $(this).parent();

    div.find('p').remove();

    profile_form_data(this, false);
    $(this).removeClass('valid invalid');

    if (value !== '') {
      if (value.length < 4) {
        $(this).addClass('invalid');

        div.append('<p>Too short. Enter at least 4 characters. It’s safer.</p>');
      } else {
        $(this).addClass('valid');
        div.append('<p class="success">Success</p>');

        profile_form_data(this, true);
      }
    }
  }).focus(function() {
    $(this).removeClass('valid invalid').parent().find('p').remove();

    profile_form_data(this, false);
  });

  // username
  $('#login_register #username_register').keyup(function(ev) {
    var div = $(this).parent();

    var p = div.find('p');

    if (p.hasClass('loading') === false) {
      p.remove();
    }

    $(this).removeClass('valid invalid');
  }).blur(function(e) {
    $(this).removeClass('valid invalid');

    this.value = $.trim(this.value.replace(/[^A-Za-z0-9\_\-]/ig, ''));

    if ($(this).val() !== '' && $(this).data('status') === false && $(this).data('pending') === false) {
      $(this).parent().append('<p class="loading">Loading ...</p>');

      form_validators.username(this, $(this).val());
    } else if ($(this).val() !== '') {
      $(this).addClass('valid');
    }
  }).focus(function() {
    $(this).removeClass('valid invalid').parent().find('p').remove();

    profile_form_data(this, false);
  });

  $('#login_register').data('submitted', false);
  $('#login_register').ajaxForm({
    'beforeSerialize': function() {
      var nextStep = false, emptyInput = null;

      $.each($('#login_register input.input'), function(i, input) {
        var value = $.trim($(input).attr('value'));

        if (value !== '') {
          if ($(input).data('status') === false) {
            nextStep = false;

            if ($(input).data('pending') === true) {
              $('#login_register').data('submitted', true);

              return false;
            } else if ($(input).data('status') === false) {
              $('html, body').animate({
                'scrollTop': $(input).position().top
              }, 250, function() {
                $(input).focus();
              });

              return false;
            }
          }

          nextStep = true;
        } else {
          if (emptyInput === null) {
            emptyInput = input;

            nextStep = false;

            return false;
          }
        }
      });

      if (emptyInput !== null && nextStep === false) {
        $('html, body').animate({
          'scrollTop': $(emptyInput).position().top
        }, 250, function() {
          $(emptyInput).focus();
        });
      }

      return nextStep;
    },
    'dataType': 'json',
    'success': function(response) {
      if (response.status === false && response.errors !== undefined) {
        $.each(response.errors, function(i, error) {
          var input = $('input[name="' + error.key + '"]');

          if (input.length === 1) {
            input.addClass('invalid');

            var div = input.parent(), message = error.message;
            div.find('p').remove();

            try {
              message = input.attr('id').toLowerCase() === 'email' ? 'Huh, this email is already in use.' : message;
            } catch (e) {
            }

            div.append('<p>' + message + '</p>');
          }
        });
      } else if (response.status === true && response.url) {
        VoxioAjax.response(response, true);
      }
    }
  });

  // Login process
  $('#login_voxio').submit(function() {
    var that = this;

    if ($(that).data('submitted') === true) {
      return false;
    }

    $(that).data('submitted', true);

    $('#password').parent().find('p').remove();

    var username = $('#username'), password = $('#password'), valid = true;

    if ($.trim(username.val()) === '') {
      username.focus();

      valid = false;
    } else if ($.trim(password.val()) === '') {
      password.focus();

      valid = false;
    }

    if (valid === true) {
      $('#signin').addClass('loading');

      $.ajax({
        'url': $(this).attr('action'),
        'cache': false,
        'data': {
          'username': username.val(),
          'password': password.val()
        },
        'dataType': 'json',
        'method': 'post',
        'complete': function() {
          $(that).data('submitted', false);
        },
        'success': function(response) {
          $('#signin').removeClass('loading');

          if (response.status === true && response.url !== undefined) {
            VoxioAjax.redirect(response.url);
          } else if (response.status === false && response.message !== undefined) {
            var div = $('#password').parent();
            div.find('p').remove();
            div.append('<p>' + response.message + '</p>');
          }
        },
        'statusCode': {
          302: function() {
            VoxioAjax.redirect('/');
          }
        }
      });
    } else {
      $(that).data('submitted', false);
    }

    return false;
  }).data('submitted', false);

  // Forgot password
  $('#femail').bind('focus blur', function() {
    var value = $.trim($(this).val()), valid_email = /^([^@]+)@([^\s@.]([^\s@.]*\.[^\s@.]+)+)$/.test(value);

    $(this).removeClass('valid invalid');

    if ($(this).data('valid') === false) {
      $('#login_forgot > p').remove()
    }

    if (value !== '') {
      if (valid_email === false) {
        $(this).addClass('invalid');

        $('#login_forgot').append('<p class="invalid">Please enter a valid email address.</p>');
      } else if ($(this).data('valid') === true) {
        $(this).addClass('valid');
      }
    }
  }).data('valid', false);

  $('#login_forgot').ajaxForm({
    'beforeSubmit': function() {
      var value = $.trim($('#femail').val()), valid_email = /^([^@]+)@([^\s@.]([^\s@.]*\.[^\s@.]+)+)$/.test(value), valid = false;

      $('#femail').removeClass('valid invalid');
      $('#login_forgot > p').remove()

      if (value !== '') {
        if (valid_email === false) {
          $('#login_forgot').append('<p class="invalid">Please enter a valid email address.</p>');
          $('#femail').addClass('invalid').focus();
        } else if (valid_email === true) {
          $('#send-instructions').addClass('loading');

          valid = true;
        }
      }

      return valid;
    },
    'success': function(response) {
      $('#send-instructions').removeClass('loading');

      $('#login_forgot > p').remove();

      $('#femail').removeClass('valid invalid');

      if (response === 'success') {
        $('#femail').addClass('valid');

        $('#login_forgot').append('<p>Recovery link was sent to your email.</p>');

        $('#femail').data('valid', true);

        setTimeout(function() {
          if (animStarted === true) {
            return false;
          }

          animStarted = true;

          // Hide fields
          $('> div, > fieldset, > a', '#login_voxio').css('opacity', 0);

          // Show fields
          $('#login_voxio #username').prev().css('opacity', 1).show();
          $('#password').parent().show();

          // Show form
          $('#login_voxio').show();

          $('> p, > fieldset', '#login_forgot').animate({
            'opacity': 0
          }, 'fast', function() {
            $('> p', '#login_forgot').remove();
          });

          // Hide h1 and h2
          $('> div', '#login_forgot').animate({
            'opacity': 0
          }, 'normal', function() {
            // Hide forms
            $(forms).hide();
            // Show form
            $('#login_voxio').show();
            $('#login_voxio #username').focus();

            $('> fieldset', '#login_voxio').animate({
              'opacity': 1
            }, 'fast', function() {
              animStarted = false;

              $('#femail').attr('value', '').data('valid', true);
            });

            $('> a', '#login_voxio').animate({
              'opacity': 1
            }, 'fast');
          });

          // Show h1 and h2
          $('> div', '#login_voxio').animate({
            'opacity': 1
          }, 'normal');
        }, 2500);
      } else {
        $('#femail').addClass('invalid');

        if (response === 'invalid') {
          $('#login_forgot').append('<p class="invalid">Are you sure this is the right email address?</p>');
        } else if (response === 'error') {
          $('#login_forgot').append('<p class="invalid">Sorry an error occured :( Try again later.</p>');
        }
      }
    }
  });
})(jQuery);

$(document).ready(function() {
  var check_inputs = {
    check: function(input) {
      var value = $.trim($(input).attr('value'));
      var span = $(input).prev();

      if (value !== '') {
        $(span).hide();
      } else {
        $(span).show();
      }
    },
    init: function() {
      $.each($('div input', '#landing_forms > div > form'), function() {
        check_inputs.check(this);

        $(this).blur(function() {
          check_inputs.check(this);
        }).keyup(function() {
          check_inputs.check(this);
        }).focus(function() {
          check_inputs.check(this);
        });
      });
    }
  };

  check_inputs.init();

  $('div span', '#landing_forms > div > form').click(function() {
    $(this).next().focus();
  });
});

Answer 2

您遇到的问题来自show_hide类由注册链接和忘记密码链接共享的事实，并且当您分配点击处理程序时，您可以通过其类引用它们：

$('.show_hide').click(function(){
$(".login").slideToggle("slow");  });

$('.show_hide').click(function(){
$(".signup").slideToggle("slow");  });

Mi建议您使用ID而不是clases来引用您的链接，例如：

<h2>New to vox.io? <a id="show_hide_sign_up" href="#" class="show_hide">Sign up</a></h2>
…
<a id="show_hide_forgot_pass" href="#" class="show_hide">Forgot password?</a>

当你分配处理程序时，它将如下所示：

$('#show_hide_log_in').click(function(){
$(".login").slideToggle("slow");  });

$('#show_hide_sign_up').click(function(){
$(".signup").slideToggle("slow");  });

$('#show_hide_forgot_pass').click(function(){
$(".forgot").slideToggle("slow");  });

要更改动画，您可以更改fadeIn（）的slideToggle（），以获得更多效果，您可以在此处查看：http://api.jquery.com/category/effects/

使用jQuery管理注册，登录和忘记密码div

2 个答案: