'Manage signup, login and forgot password divs with jQuery

I want to create animated login, sigup and forgot password with jQuery.

I found this idea in http://vox.io

I created the hard work but I still unable to show the div of forgot password.

I have 3 div : login, signup and forgot ;

Here's the full code :

<!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>

And how can I change animation (like fade In) ??

jqueryhtml


Solution 1:[1]

On the site you liked, there is a non-obfuscated file that site uses to achieve the functionality you want (http://vox.io/public/a0ea2e1a63/static/js/Authentication/login.js)

So you have all the javascript of a working example. So start over!

Just use the source code from their site as an example. It should be very easy to reverse engineer - just start from scratch on a sample app... and then move the key parts of the source code into your app. Piece by piece. Test it in iterations.

1) Add the form 2) Add the animation 3) etc.

In particular search for .animate and watch how they are doing it:

Here is their code: 

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

Solution 2:[2]

The problem you experience comes from the fact that the show_hide class is being shared by both the Sign up link and Forgot Password link, and at the beggining when you assign the click handlers you reference both by their class:

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

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

Mi recommendation is that you use ids instead of clases to reference your links, like for example:

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

And when you assign the handler will look like this:

$('#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");  });

And to change the animation you just can change the slideToggle() for fadeIn(), for more effects you can look here: http://api.jquery.com/category/effects/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nicholas DiPiazza
Solution 2 Rafael

Related Questions