The struggle to smoothly animate and fade in a hidden text field can be witnessed in this example.
The goal is to seamlessly move all elements around the text field and button while fading in/out the hidden element. However, it appears that towards the end or beginning of the animation, there is an abrupt movement.
HTML
<input>
<div>
<input id="hidden_field">
</div>
<button type="button" id="show" class="btn">Toggle</button>
CSS
#hidden_field{
display: none;
}
JS
$(document).ready(function(){
var isUp = true;
$('#show').on('click', function(){
if(isUp){
$('#hidden_field').css({opacity:0}).slideDown("slow").animate({opacity:1});
isUp = false;
}else{
$('#hidden_field').animate({opacity:0}).slideUp("slow");
isUp = true;
}
});
});
Interestingly, using a hidden div instead of a hidden field seems to work fine. Any guidance on resolving this issue would be greatly appreciated.