How can I make the hidden form animate from right to left, after the class .button is hidden. I can make something like that, but I cannot synchronize their animations.
When the button is clicked, it goes to the right by some pixels and then is hidden, and before it gets hidden, I want the form to animate.
How can I create same effect like the form was inside .button class, and appears from there?
Any help very appreciated!
Here is the fiddle: fiddle link
$('a.button').click(function() {
$(this).addClass('hidden-btn');
$('.myform').fadeIn('slow');
$('.myform input').focus();
});.wrapper {
overflow: hidden;
height: 200px;
}
.button {
font-size: 18px;
background-color: lightblue;
width: 222px;
text-align: center;
height: 44px;
line-height: 40px;
text-transform: uppercase;
display: inline-block;
font-weight: 700;
margin-top: 100px;
left: 50%;
transform: translateX(-50%);
position: relative;
transition: all 0.4s
}
.hidden-btn {
left: 200%;
}
.myform {
float: left;
position: relative;
margin-top: 100px;
display: none;
left: 50%;
top: -145px;
transform: translateX(-50%);
}
.myform input {
float: left;
width: 284px;
height: 40px;
padding-left: 63px;
padding-right: 5px;
margin-top: 1px;
border: none;
color: #767676;
font-size: 13px;
background-color: lighgrey;
}
.myform button {
width: 170px;
height: 44px;
border: 0;
text-transform: uppercase;
color: #fff;
font-size: 16px;
background-color: lighblue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<a href="#" class="button">Test</a>
<form class="myform" action="">
<input type="text" placeholder="Email">
<button type="submit">try</button>
</form>
</div>
