UPDATE: I have replicated my issue in jsFiddle: http://jsfiddle.net/leongaban/3v8vW/3/
I am dealing with 2 tabs - one should reduce the height of the form-background when clicked, while the other should increase it. I want a smooth animation without any abrupt transitions.
Upon clicking a tab, the other tab should be hidden.
Codepen: http://codepen.io/leongaban/pen/wipba
If you click on login, you will observe the animation in action. The login section has a height of 290px and the register section is set at 410px.
The animate code for this was taken from a basic example here.
My goal is to only animate the height adjustment, keeping the position and width unchanged. Setting properties like top and width were necessary to prevent erratic resizing of the .form-background div post-animation.
Can you identify what's causing this behavior? Any suggestions on resolving it would be appreciated :)
jQuery
// tabs
$('#login-form #tab-register').click(function() {
$('#login-form').fadeToggle();
$(".form-background").animate(
{
"top": "-342px",
"width": "400px",
"height": "410px"
},
"slow", function(){
$('#register-form').fadeToggle();
});
});
$('#register-form #tab-login').click(function() {
$('#register-form').fadeToggle();
$(".form-background").animate(
{
"top": "-214px",
"width": "400px",
"height": "290px"
},
"slow", function(){
$('#login-form').fadeToggle();
});
});
CSS
.container .login-container .login-box .form-background {
position: relative;
top: -342px;
height: 410px;
background: white;
-webkit-box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.2);
-moz-box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.2);
box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.2);
z-index: -1;
}