I'm attempting to create a seamless transition from one form field type to another. However, when I add another <input> element, the following elements do not animate into their static positions.
$("#switchlogin").click(function() {
//Creating the label element
var emaillabel = $("<label>").text("Email").attr("for", "email");
//Creating the input element
var emailinput = $('<input type="text">').attr({
id: "email",
name: "email"
});
//Creating the label element
var pwdlabel = $("<label>").text("Repeat Password").attr("for", "password-wh");
//Creating the input element
var pwdinput = $('<input type="password">').attr({
id: "password-wh",
name: "password-wh"
});
$("#username-field").after(emaillabel);
emaillabel.after(emailinput);
$("#password-field").after(pwdlabel);
pwdlabel.after(pwdinput);
});input {
border: solid #e3e3e3 1pt;
display: block;
margin-bottom: 1em;
font-size: 14pt;
opacity: 0;
animation: fadeIn .3s forwards;
}
label {
opacity: 0;
animation: fadeIn .3s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="<?php the_permalink(); ?>" id="login" method="post">
<div id="username-field">
<label for="username">Username</label>
<input type="text" id="username" name="username">
</div>
<div id="password-field">
<label for="password">Password</label>
<input type="password" id="password" name="password">
</div>
<div id="buttons-field">
<button type="submit">Login</button>
<a href="#" id="switchlogin">Register</a>
</div>
</form>https://jsfiddle.net/fpvctpjs/2/
My goal is to have the password-field smoothly move down to accommodate the new elements when the register link is clicked.
I've experimented with adding styles like margin-top, position:absolute, and position:relative, but haven't been able to achieve the desired effect.
Any assistance would be greatly appreciated,
marsman