I can't seem to figure out a solution for my current issue. I want my inputs to be hidden with opacity: 0 on page load and then appear later with full opacity, but only if they are displayed in block format in order to move down the page instead of inline. However, setting them to block seems to interfere with the fade-in effect that is applied using the .block class. Is there a way to make the inputs display as block elements while still being able to fade in using CSS?
Furthermore, I am trying to find a way to make the labels/inputs appear as block elements so that the label is positioned above the input field and both elements are centered on the page. Is this possible within the given example?
You can see the issue demonstrated in this fiddle.
$(function() {
var elems = $('.intro input').on('keypress', function() {
if ($(this).val().trim().length > 2) {
$(this).parent().next('label').addClass('block');
}
$('#intro-button').toggle(
elems.filter(function() {
return this.value.trim() !== "";
}).length === elems.length
)
});
});.intro {
opacity: 0;
}
.info-input {
padding: 10px 15px;
margin: 40px auto;
}
.intro:first-child {
display: block;
opacity: 1;
}
.block {
display: block;
visability: visible;
opacity: 1;
-webkit-animation: fadein 1s ease-in;
-moz-animation: fadein 1s ease-in;
animation: fadein 1s ease-in;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="intro">What is your name?
<input id="name" type="text" class="info-input">
</label>
<label class="intro">What is your email address?
<input id="email" type="email" class="info-input">
</label>
<label class="intro">What is your title?
<input id="title" type="text" class="info-input">
</label>